jquery - jsRender は、特定の行数と列数を指定して、html テーブルのテンプレートを作成します

Question

このようなことをする必要がありますが、テンプレートを使用しています。

テンプレート内でカウンターを使用する方法を知っていますか? 私が作成する入力の ID を生成するには、これらのカウンターが必要なので、お願いします。

HTML コード:

<div> 
    <span>N Cols:</span>
    <input id="txtNCols" type="text" /> 
    <span>N Rows:</span>
    <input id="txtNRows" type="text" />
    <input type="button" id="btnCrearMatriz" value="Create" />
</div>

JS コード

$('#btnCrearMatriz').click(function () {
    var rows = $('#txtNRows').val(); //here's your number of rows and columns
    var cols = $('#txtNCols').val();
    var table = $('<table><tbody>');
    for (var r = 0; r < rows; r++) {
        var tr = $('<tr>');
        for (var c = 0; c < cols; c++){
             var td=$('<td>');
             var textbox="<input type='text' id='txt_r" +(r+1) + "c"+ (c+1) + "'/>";
             td.append(textbox);
             td.appendTo(tr);
        }      
        tr.appendTo(table);
    }

    table.appendTo('body');
});

前もって感謝します。

編集：

私はちょうどこれを見つけました。うーん、必要なものを手に入れるのは、思ったより難しいようです。

とにかく、私はこのようなことを試しましたが、どうやら複数レベルのネストをサポートしていないようです:(

<script id="table_template" type="text/x-jsrender">
   <table>
        <tbody>
           {{range start=1 end=rows}}
                  <tr>
                   {{range start=1 end=cols}}
                        <td>
                            <input type="text"/>
                        </td>
                   {{/range}}
                  </tr>         
            {{/range}}
        </tbody>
   </table>
</script>