Question

我有一个带有一些数据的json文件，我使用Js循环加载一个jQuery模板来迭代并加载一个由4行组成的表，基于数据，到目前为止我只得到最后一行。 https://github.com/codepb/jquery-template

<script type="text/html" id="tableContent">
  <tr>
    <th>Key</th>
    <th>Product</th>
    <th>Bookings</th>
    <th>%</th>
    <th>Transactions</th>
  </tr>
  <tr>
    <td data-content="">sth</td>
    <td data-content="Product"></td>
    <td data-content="Bookings"></td>
    <td data-content="Percentage"></td>
    <td data-content="Transactions"></td>
  </tr>
</script>

      function builTable(){
          var table = "",
              colors = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'];

          for(i = 0; i< source.Products.length; i++){

            $("table").loadTemplate($("#tableContent"),

{


            Product: source.Products[i].Product,
            Bookings: source.Products[i].Bookings,
            Percentage: source.Products[i].Percentage,
            Transaction: source.Products[i].Transaction

} ); 

  $(document).ready(function(){

    builTable();

  });

<table border="1" cellpadding="2">



</table>

循环内部有什么问题吗？

http://jsfiddle.net/9JV7t/1/

Answer 1

我认为你只需要添加一个数组，因为它只加载整个内容一次然后再次覆盖它。但是因此您只需要在模板中包含数据行并将标题添加到表格中（DEMO）：

<script type="text/html" id="tableContent">
    <tr>
        <td data-content="">sth</td>
        <td data-content="Product"></td>
        <td data-content="Bookings"></td>
        <td data-content="Percentage"></td>
        <td data-content="Transactions"></td>
    </tr>
</script>

你的桌子：

<table>
    <thead>
        <tr>
            <th>Key</th>
            <th>Product</th>
            <th>Bookings</th>
            <th>%</th>
            <th>Transactions</th>
        </tr>    
    </thead>
    <tbody>

    </tbody>
</table>

和js：

function builTable(){
     $("tbody").loadTemplate($("#tableContent"), source.Products); 
}

循环中的jQuery加载模板

1 个答案: