2

我需要做这样的事情，但使用模板。

你知道如何在模板中使用计数器吗？我问你是因为我需要这些计数器来为我创建的输入生成 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>
4

1 回答 1

4

它对您不起作用的原因是 JsRender 模板当然是数据驱动的。当您编写{{range start=1 end=cols}}时，这意味着您将end设置为cols当前数据项的属性。但是当前数据项不是您的原始数据对象，因为您在嵌套模板中。

有效的方法range是要么传递给它一个数组，在这种情况下它会在你指定的范围内迭代数组，或者你不给它传递一个数组，在这种情况下它会创建自己的数组——一个整数数组，从开始到您指定的结尾。

{{range myArray start=1 end=3}}

因此，您的{{range}}标签正在遍历生成的数组，块中的数据项是该数组中的当前整数。

如果您想从更高层获取数据项，您可以使用~root.cols（例如 - 获取您传入的根数据cols的属性）或者您可以使用创建可以从嵌套模板块访问的辅助变量在任何级别。~foo=someExpression

因此，基于此，以下是解决上述情况的几种方法：

使用{{range}}

<script id="myTmpl" type="text/x-jsrender">
  <table>
    <tbody>
      {{range start=1 end=rowCount ~colCount=colCount}}
        <tr>
          {{range start=1 end=~colCount ~rowNo=#index+1}}
            <td>
              <input type="text" id="{{:'r' + ~rowNo + 'c' + (#index + 1)}}" />
            </td>
          {{/range}}
        </tr>
      {{/range}}
    </tbody>
  </table>

针对数据呈现如下：

$.templates("#myTmpl").render({rowCount: 10, colCount: 3)

或使用{{for}}

  <table>
    <tbody>
      {{for rows ~cols=cols}}
        <tr>
          {{for ~cols ~rowNo=#index+1}}
            <td>
              <input type="text" id="{{:'r' + ~rowNo + 'c' + (#index + 1)}}" />
            </td>
          {{/for}}
        </tr>
      {{/for}}
    </tbody>
  </table>
</script>

针对数据呈现如下：

$.templates("#myTmpl").render({rows:[1,2,3,4], cols:[1,2]})

于 2013-10-12T02:19:42.510 回答