如何使用jQuery模板生成N X N表格

Question

我必須生成N X N表格 假設如果我給N爲5，它應該創建一個包含5行和列的表格。 我的第一個計劃是在foor循環中創建一個HTML，但我相信使用jQuery模板，可能會生成表格，這比其他人快。請糾正我，如果我錯了。

這是我的腳本

<script type="text/javascript"> 
      $(document).ready(function() { 
//sample data 
       var data = [ 
          [ 
           { Row: 0, Col: 0 }, 
           { Row: 0, Col: 1 } 
          ], 
          [ 
           { Row: 1, Col: 0 }, 
           { Row: 1, Col: 1 } 
          ] 
         ]; 

       $('#trTemplate').tmpl(data).appendTo('#containerTable'); 
       $('#testArea').html(generateNNJSON(2, 2)); 
       $('#testSection').html(data); 
       $('#trTemplate').tmpl(generateNNJSON(2, 2)).appendTo('#tblArena'); 

      }); 
// generate JSON 
      function generateNNJSON(row, col) { 

       var JSONdata = '['; 
       for (i = 0; i < row; i++) { 
        JSONdata += '['; 
        for (j = 0; j < col; j++) { 
         JSONdata += '{ Row:' + i + ',Col:' + j + ' }'; 
         if (!(j == col - 1)) 
          JSONdata += ','; 
        } 
        if (!(i == row - 1)) 
         JSONdata += '],'; 
        else 
         JSONdata += ']'; 
       } 
       JSONdata += ']'; 
       return JSONdata; 
      } 


     </script> 

這是我的HTML

<script id="trTemplate" type="text/x-jquery-tmpl"> 
      <tr> 
      {{each $data}}    
       <td>${Col}</td> 
      {{/each}} 
      </tr> 

    </script> 
    <table id="containerTable" border="2"> 
    </table> 
    <table id="tblArena" border="2"> 
    </table> 
    <div id="testArea"> 
    </div> 
    <div id="testSection"> 

    </div> 

在查看此頁面僅$('#trTemplate').tmpl(data).appendTo('#containerTable');是否工作正常，數據會是這樣「[[{行：0，上校：0}，{行：0，柱：1}]，[{行：1，柱：0}，{行：1，柱：1}]]」

generateNNJSON將返回這樣[object Object],[object Object][object Object],[object Object]

所以只創建第一個表格，其次是空的。

有什麼想法？

Answer 1

的$.tmpl()的數據參數必須是一個object，你必須JSON字符串轉換爲對象：

function generateNNJSON(row, col) { 
    var JSONdata = '['; 
    for (i = 0; i < row; i++) { 
    JSONdata += '['; 
    for (j = 0; j < col; j++) { 
     JSONdata += '{ "Row":' + i + ',"Col":' + j + ' }'; 
     if (!(j == col - 1)) 
     JSONdata += ','; 
    } 
    if (!(i == row - 1)) 
     JSONdata += '],'; 
    else 
     JSONdata += ']'; 
    } 
    JSONdata += ']'; 
    return $.parseJSON(JSONdata); 
}