템플릿을 사용하여 중첩 된 UL LI 렌더링과 코드

Question

아래 내 HTML 코드가에서 테이블을 제거, 나는이 문제를 내가 코드에서 table를 제거하고 tableless 할 필요가

1. 를 해결하기 위해 여러분의 도움이 필요합니다.
2. 템플릿을 사용하여이 코드를 렌더링하는 가장 좋은 방법 & jQuery AJAX, 여기 데이터는 XML 파일에서 가져온 것입니다.

실행 코드 : http://jsfiddle.net/samansari/ppu6T/

XML 데이터 :

$(function() { 
    $.ajax({ 
     type: "POST", 
     url: "/echo/xml/", 
     dataType: "xml", 
     data: { 
      xml: "<data caption='Start Processes'><heading caption='Customer Registration'><info caption='Credit note approval' desc='Credit Note request form and approval process.'/></heading><heading caption='Installation'><info caption='Credit note approval' desc='Credit Note request form and approval process..'/><info caption='Credit And Rebill Note (smartforms)' desc='Generate and Process a Letter of Guarantee for the customer.'/></heading></data>>" 
     }, 
     success: function(xml) { 
      console.log(xml); 
     } 
    }); 
});​ 

HTML 코드 : 모든

<div id="navcontainer"> 
    <ul> 
     <li> 
      <div class="gtpointer"><span>&#160;&#160;&#160;&#160;Start Processes</span> </div>   
      <ul> 
       <li> 
        <span> <span class="gtpointer">Customer Registration</span> </span> 
        <ul> 
         <li> 
          <span> 
           <table width="100%" border="0"> 
            <tr> 
             <td width="30%"> 
              <span class="landingSubmenu"><a href="#">Credit note approval</a></span> 
             </td> 
             <td> 
              <span >Credit Note request form and approval process.</span> 
             </td> 
            </tr> 
           </table> 
          </span> 
         </li> 
        </ul> 
       </li> 

       <li> 
        <span> <span class="gtpointer">Installation</span> </span> 
        <ul> 
         <li> 
          <span> 
           <table width="100%" border="0"> 
            <tr> 
             <td width="30%"> 
              <span class="landingSubmenu"><a href="#">Credit note approval</a></span> 
             </td> 
             <td> 
              <span >Credit Note request form and approval process.</span> 
             </td> 
            </tr> 
           </table> 
          </span> 
         </li> 
         <li> 

          <span> 
           <table width="100%" border="0"> 
            <tr> 
             <td width="30%"> 
              <span class="landingSubmenu"><a href="#">Credit And Rebill Note (smartforms)</a></span> 
             </td> 
             <td> 
              <span >Generate and Process a Letter of Guarantee for the customer.</span> 
             </td> 
            </tr> 
           </table> 
          </span> 

         </li> 
        </ul> 
       </li> 


      </ul> 
     </li> 



    </ul> 
</div> 

감사합니다.

Answer 1

첫 번째 질문의 경우 : TD 대신 표시되는 인라인 블록 DIV를 사용하고 TABLE 및 TR을 제거하십시오. 그런 다음 TDs를 시뮬레이션하기 위해 중간에 두 된 DIV 너비 비율 및 수직 정렬을 설정

http://jsfiddle.net/bQbzK/

HTML을

<div id="navcontainer"> 
    <ul> 
     <li> 
      <div class="gtpointer"> 
       <span>&#160;&#160;&#160;&#160;Start Processes</span> 
      </div>   
      <ul> 
       <li> 
        <span> 
         <span class="gtpointer">Customer Registration</span> 
        </span> 
        <ul> 
         <li> 
          <span> 
           <div class="col1"> 
            <span class="landingSubmenu"> 
             <a href="#">Credit note approval</a> 
            </span> 
           </div> 
           <div class="col2"> 
             <span > 
             Credit Note request form and approval process. 
             </span> 
           </div> 
          </span> 
          </li> 
        </ul> 
       </li>      
       <li> 
        <span> 
         <span class="gtpointer">Installation</span> 
        </span> 
        <ul> 
         <li> 
          <span> 
           <div class="col1"> 
            <span class="landingSubmenu"> 
             <a href="#">Credit note approval</a> 
            </span> 
           </div> 
           <div class="col2"> 
            <span > 
            Credit Note request form and approval process. 
            </span> 
           </div> 
          </span> 
          </li> 
          <li>          
           <span> 
           <div class="col1"> 
            <span class="landingSubmenu"> 
             <a href="#"> 
             Credit And Rebill Note (smartforms) 
             </a> 
            </span> 
           </div> 
           <div class="col2"> 
            <span> 
            Generate and Process a Letter of 
            Guarantee for the customer. 
            </span> 
           </div> 
           </span>  
          </li> 
         </ul> 
        </li> 
        </ul> 
       </li>  
      </ul> 
     </div> 

CSS :

div{ 
    display: inline-block; 
    vertical-align: middle; 
} 
.col1{ 
    width: 30%; 
} 
.col2{ 
    width: 69%; 
}