渲染嵌套UL LI使用模板和代码

Question

下面是我的HTML代码删除表，我需要你的帮助来解决2个问题，

1. 我需要从代码中删除一个table并使其无表格。
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

对于第一个问题： 只是使用内联块显示DIV而不是TD，并删除TABLE和TR。 然后设置为两者的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%; 
}