Question

我必须生成N X N表假设我将N设为5，它应该创建一个包含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');正在运行，数据将如下所示＆＃39; [[{Row：0，Col：0}，{Row：0，Col：1}]，[ {Row：1，Col：0}，{Row：1，Col：1}]]＆＃39;

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

如何使用jquery模板生成N X N表

1 个答案: