How to build 5 column table using jquery template Json response

Below is my Json Response

"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.开发者_如何学JAVATable).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>

What I am looking is to build a table with 5 columns and n rows.(columns repeating horizontally).

eg:
col1  col2  col3  col4 col5
col6  col7  col8  col9 col10
col11 col12 col13
.....
....

How to build such table with the above data structure and jquery template? Thanks in advance.

One solution is to not process your array directly by the template (so, it executes the template for each item in the array). Instead, you could pass the object that contains your array (so, pass data that contains data.Table).

Then, in your template, you have full access to the index, while you loop through your cells using {{each}}. Using modular division you can properly start and end rows like:

<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>

Sample here: http://jsfiddle.net/rniemeyer/5naAL/

Here's the simplest solution (unless I misunderstood something). jquery-tmpl auto loops over objects/arrays so you don't need to process the data beforehand. My example only has 3 columns, but you can easily add 2 more <td>s with whatever data you want in it.

<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>

Working example: http://jsfiddle.net/qYgrZ/

Try this:

Add a new function called processData to massage the input array and add a new template to render the cell as given below:

Working example @ http://jsfiddle.net/Cjqr9/

<script type="text/javascript">
    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" 
                    ]
    };

    $(function(){
         processData(data.Table);
         $("#tableTemplate").tmpl(processData(data.Table)).appendTo("#tblid");
    });

    function processData(data){
        var delta = 5 - data.length%5;
        while(delta > 0){
            data.push({});
            delta--;
        }
        var arr = null;
        var retArr = [];
        $.each(data, function(i, item){
            if(i%5 == 0){
                arr = [];
                retArr.push(arr);
            }
            arr.push(item);
        });
        return retArr;
    }
    </script>

    <script id="tableTemplate" type="text/x-jquery-tmpl">                      
        <tr>         
            {{tmpl($data) "#cellTemplate"}}
        </tr>    
    </script>

    <script id="cellTemplate" type="text/x-jquery-tmpl">
        {{if URL}}
         <td>                   
                <a href="${URL}" target="_blank">               
                    <img src="${FileNameStatus}.jpg" title="${Title}" /> 
                    ${$item.parent.indexOf($item.data)}
                </a>                             
         </td>       
         {{else}}
            <td/>
         {{/if}}
    </script>
    <div id="rightWrapper">
        <table id="tblid">
        </table>
    </div>