0

Nを5とすると、5行と5列のテーブルが作成されると仮定してNXNテーブルを生成する必要があります。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');機能し、データは次のようになります'[[{Row：0、Col：0}、{Row：0、Col：1}]、[{Row：1、Col：0}、{行：1、列：1}]] '

generateNNJSONこのように戻ります[object Object],[object Object][object Object],[object Object]

したがって、最初のテーブルのみが作成され、2番目のテーブルは空になります。

何か案が ？

4

1 に答える 1

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);
}
于 2013-02-20T10:59:51.873 に答える