jquery - jsRender 创建一个 html 表格模板，给定一定数量的行和列

Question

我需要做类似 this 的事情，但使用模板。

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

提前致谢。

编辑:

我刚刚找到this 。嗯，看来要得到我需要的东西，会比我想象的要困难得多。

无论如何，我尝试了类似的方法，但显然它不支持多层嵌套:(

<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>

Answer 1

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

range 的工作方式是，要么向它传递一个数组，在这种情况下，它会迭代指定范围的数组，要么不向它传递一个数组，在这种情况下，它会遍历数组。 >创建自己的数组 - 从您指定的开始到结束的整数数组。

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

因此，您的 {{range}} 标记正在迭代生成的数组，并且 block 中的数据项是该数组中的当前整数。

如果您想从更高的位置获取数据项，您可以使用 ~root.cols (例如 - 获取 cols 属性em>根数据您传入的)，或者您可以使用~foo=someExpression创建一个可以从任何级别的嵌套模板 block 访问的辅助变量。

基于此，以下是解决上述场景的几种方法:

使用{{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]})