0

我必须生成 NXN 表假设如果我将 N 设为 5，它应该创建一个包含 5 行和列的表。我的第一个计划是在 foo 循环中创建 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');时，数据将如下所示 '[[{ Row:0,Col:0 },{ Row:0,Col:1 }],[{ Row:1,Col:0 },{行：1，列：1 }]]'

generateNNJSON会像这样返回[object Object],[object Object][object Object],[object Object]

所以只有第一个表被创建，第二个是空的。

任何的想法 ？

4

1 回答 1

1

的 data 参数$.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);
}
于 2013-02-20T10:59:51.873 回答