如何使用jquery模板Json响应构建5列表

下面是我的Json响应

"Table" : [
        {
            "CompanyName" : "Company1",
            "Title" : "xxx",
            "URL" : "http://www.xyz.com",
            "FileNameStatus" : "active"
        },
        {
           "CompanyName" : "Company2",
            "Title" : "xxx",
            "URL" : "http://www.xyz1.com",
            "FileNameStatus" : "inactive"
        },
        ...

$("#tableTemplate").tmpl(data.Table).appendTo("#tblid");

 <script id="tableTemplate" type="text/x-jquery-tmpl">                 
     <tr>
        <td>      
            <a href="${URL}" target="_blank">
              <img src="${FileNameStatus}.jpg" title="${Title}" />
            </a>                    
        </td>
      </tr>
   </script>     

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>

如何使用上述数据结构和jquery模板构建这样的表？ 提前感谢。

试试这个：

添加一个名为processData的新函数来处理输入数组，并添加一个新模板来呈现单元格，如下所示：

工作示例@

风险值数据=
{
“表格”：
[ 
{ 
“公司名称”：“公司1”，
“标题”：“xxx”，
“URL”：”http://www.xyz.com",
“FileNameStatus”：“活动”
}, 
{
“公司名称”：“公司2”，
“标题”：“xxx”，
“URL”：”http://www.xyz1.com", 
“FileNameStatus”：“非活动”
]
};
$（函数（）{
processData（data.Table）；
$（“#tableTemplate”）.tmpl（processData（data.Table））.appendTo（“#tblid”）；
});
函数processData（数据）{
var delta=5-数据。长度为%5；
而（增量>0）{
data.push（{}）；
三角洲--；
}
var-arr=null；
var-retArr=[]；
$。每个（数据、功能（i、项）{
如果（i%5==0）{
arr=[]；
再推力（arr）；
}
arr.push（项目）；
});
回程回程；
}
{{tmpl（$data）“#cellTemplate”}
{{if URL}}
{{else}
{{/if}
这里是最简单的解决方案（除非我误解了什么）。jquery tmpl自动循环对象/数组，因此您无需事先处理数据。我的示例只有3列，但您可以轻松地添加2个以上的
，其中包含您想要的任何数据

<script>
var data = 
    {
        "Table" : 
        [ 
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }, 
            {
                 "CompanyName" : "Company2", 
                 "Title" : "xxx", 
                 "URL"    : "http://www.xyz1.com", 
                 "FileNameStatus" : "inactive" 
            },
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }
        ]
    };

$(function(){
     $("#tableTemplate").tmpl(data.Table).appendTo("#tblid");
});
</script>

<script id="tableTemplate" type="text/x-jquery-tmpl">
    <tr>    
        <td>                   
            <a href="${URL}" target="_blank">               
                <img src="${FileNameStatus}.jpg" title="${Title}" /> 
            </a>
        </td>
        <td>
            ${CompanyName}
        </td>
        <td>
            ${Title}
        </td>
    </tr>
</script>

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>


风险值数据=
{
“表格”：
[ 
{ 
“公司名称”：“公司1”，
“标题”：“xxx”，
“URL”：”http://www.xyz.com",
“FileNameStatus”：“活动”
}, 
{
“公司名称”：“公司2”，
“标题”：“xxx”，
“URL”：”http://www.xyz1.com", 
“FileNameStatus”：“非活动”
},
{ 
“公司名称”：“公司1”，
“标题”：“xxx”，
“URL”：”http://www.xyz.com",
“FileNameStatus”：“活动”
}
]
};
$（函数（）{
$（“#tableTemplate”）.tmpl（data.Table）.appendTo（“#tblid”）；
});
${CompanyName}
${Title}

工作示例：
一种解决方案是不通过模板直接处理数组（因此，它为数组中的每个项执行模板）。相反，您可以传递包含数组的对象（因此，传递包含data.Table的数据）

然后，在模板中，您可以完全访问索引，同时使用{{each}}循环遍历单元格。使用模块划分，您可以正确地开始和结束行，如：

<script id="tableTemplate" type="text/html">
    <table>
        {{each(i, cell) Table}}
           {{if i % 5 == 0}}
           <tr>
           {{/if}}
             <td>      
                <a href="${URL}" target="_blank">
                  <img src="${FileNameStatus}.jpg" title="${Title}" />
                </a>                    
             </td>
           {{if (i % 5 == 4) || (i == Table.length-1)}}
           </tr>
           {{/if}}
        {{/each}}
    </table>
</script>


{{每个（i，单元格）表}
{{如果i%5==0}}
{{/if}
{{if（i%5==4）| |（i==Table.length-1）}
{{/if}
{{/每个}}

此处示例：

<script>
var data = 
    {
        "Table" : 
        [ 
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }, 
            {
                 "CompanyName" : "Company2", 
                 "Title" : "xxx", 
                 "URL"    : "http://www.xyz1.com", 
                 "FileNameStatus" : "inactive" 
            },
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }
        ]
    };

$(function(){
     $("#tableTemplate").tmpl(data.Table).appendTo("#tblid");
});
</script>

<script id="tableTemplate" type="text/x-jquery-tmpl">
    <tr>    
        <td>                   
            <a href="${URL}" target="_blank">               
                <img src="${FileNameStatus}.jpg" title="${Title}" /> 
            </a>
        </td>
        <td>
            ${CompanyName}
        </td>
        <td>
            ${Title}
        </td>
    </tr>
</script>

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>

<script id="tableTemplate" type="text/html">
    <table>
        {{each(i, cell) Table}}
           {{if i % 5 == 0}}
           <tr>
           {{/if}}
             <td>      
                <a href="${URL}" target="_blank">
                  <img src="${FileNameStatus}.jpg" title="${Title}" />
                </a>                    
             </td>
           {{if (i % 5 == 4) || (i == Table.length-1)}}
           </tr>
           {{/if}}
        {{/each}}
    </table>
</script>