jquery - テンプレートを使用してネストされたULLIをレンダリングし、コードからTABLEを削除します

Question

以下は私のHTMLコードです。2つの問題を解決するためにあなたの助けが必要です。

1. tableコードからを削除して、テーブルレスにする必要があります。
2. テンプレートとjQueryAJAXを使用してこのコードをレンダリングする最良の方法。ここでは、データは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 を削除します。次に、両方の DIV の幅のパーセンテージを設定し、垂直方向の配置を中央に設定して、TD をシミュレートします。

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%;
}