Javascript 返回行的索引&；模板表中的Col

我有一个通过

handlebar.js

创建的动态表作为模板，问题是我无法将id分配给每个单元格，这些单元格以行和列的形式表示其位置。我有下面的模板

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
        <td class="default" id="id{{@index}}"></td>
    </tr>
    {{/each}}
</script>

{{{每艘船}
{{this.name}}
{{/每个}}

第一个循环返回0，第二个循环返回1，反之亦然。我需要的是添加一个公式，而不是{{@index}，但它不允许我添加，就像在我想要添加时破坏html或表本身一样

---

我愿意接受任何建议，如

JQuery

而不是handlebar.js

您可以使用块参数：

与数据属性一起：

此外，要执行算术运算，还必须定义辅助对象：

另外，我会将

id

移动到

tr

节点下：

handlebar.registerHelper（“eval”，function（））{
设args=Array.from（参数）；
args.pop（）；//从args列表中删除不需要的对象
返回值（参数联接（“”））；
});
变量上下文={
船舶：[{
名称：“战舰”，
id:1，
第0栏：'说'，
专栏一：“你好”，
专栏2：“世界”
}, {
名称：“泰坦尼克号”，
id:2，
第0栏：“收益率”，
专栏1:‘嗨’，
专栏2：“世界”
}]
};
$（“#dropzone”）.append（handlebar.compile（$（“#td-template”）.html（）（context））

{{{#每艘船舶作为|船舶i}}
{{ship.name}
{{ship.column0}}
{{ship.column1}}
{{ship.column2}
{{/每个}}
您可以使用块参数：

与数据属性一起：

此外，要执行算术运算，还必须定义辅助对象：

另外，我会将
id
移动到
tr
节点下：


handlebar.registerHelper（“eval”，function（））{
设args=Array.from（参数）；
args.pop（）；//从args列表中删除不需要的对象
返回值（参数联接（“”））；
});
变量上下文={
船舶：[{
名称：“战舰”，
id:1，
第0栏：'说'，
专栏一：“你好”，
专栏2：“世界”
}, {
名称：“泰坦尼克号”，
id:2，
第0栏：“收益率”，
专栏1:‘嗨’，
专栏2：“世界”
}]
};
$（“#dropzone”）.append（handlebar.compile（$（“#td-template”）.html（）（context））

{{{#每艘船舶作为|船舶i}}
{{ship.name}
{{ship.column0}}
{{ship.column1}}
{{ship.column2}
{{/每个}}
您可以定义一个助手函数，如下所示：

var columnsCount = 3; // change this to the total number of columns per row in your table.
Handlebars.registerHelper("multiply", function(index, count){
    return (index * columnsCount) + count;
});

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{multiply @index 1}}"></td>
        <td class="default" id="id{{multiply @index 2}}"></td>
        <td class="default" id="id{{multiply @index 3}}"></td>
        .....
    </tr>
    {{/each}}
</script>

然后使用如下方式设置ID：

var columnsCount = 3; // change this to the total number of columns per row in your table.
Handlebars.registerHelper("multiply", function(index, count){
    return (index * columnsCount) + count;
});

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{multiply @index 1}}"></td>
        <td class="default" id="id{{multiply @index 2}}"></td>
        <td class="default" id="id{{multiply @index 3}}"></td>
        .....
    </tr>
    {{/each}}
</script>


{{{每艘船}
{{this.name}}
列{multiply@index 1}
列{multiply@index 2}
列{multiply@index 3}
{{/每个}}
您可以定义一个助手函数，如下所示：

var columnsCount = 3; // change this to the total number of columns per row in your table.
Handlebars.registerHelper("multiply", function(index, count){
    return (index * columnsCount) + count;
});

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{multiply @index 1}}"></td>
        <td class="default" id="id{{multiply @index 2}}"></td>
        <td class="default" id="id{{multiply @index 3}}"></td>
        .....
    </tr>
    {{/each}}
</script>

然后使用如下方式设置ID：

var columnsCount = 3; // change this to the total number of columns per row in your table.
Handlebars.registerHelper("multiply", function(index, count){
    return (index * columnsCount) + count;
});

<script id="td-template" type="text/x-handlebars-template">
    {{#each ships}}
    <tr>
        <td class='left-aligned'>{{this.name}}</td>
        <td class="default" id="id{{multiply @index 1}}"></td>
        <td class="default" id="id{{multiply @index 2}}"></td>
        <td class="default" id="id{{multiply @index 3}}"></td>
        .....
    </tr>
    {{/each}}
</script>


{{{每艘船}
{{this.name}}
列{multiply@index 1}
列{multiply@index 2}
列{multiply@index 3}
{{/每个}}
您为什么需要这个？在事件处理程序中只计算元素的索引通常会减少工作量（并且更容易维护）。这就不需要在元素上有一个
id
。我有一个表，例如5行到3列的表，并试图给每个单元格一个唯一的id，比如1,2,3,4，等等。我想不出任何解决方案，但如果你知道的话，你可以建议任何更简单的方法。@index是一个ships数组中的ship id/索引？是的@Oskar，我尝试了for循环，但也无法在模板中实现它。你为什么需要这个？在事件处理程序中只计算元素的索引通常会减少工作量（并且更容易维护）。这就不需要在元素上有一个
id
。我有一个表，例如5行到3列的表，并试图给每个单元格一个唯一的id，比如1,2,3,4，等等。我想不出任何解决方案，但如果你知道的话，你可能会建议任何更简单的方法。@index是一个ship数组中的ship id/索引？是的@Oskar，我尝试了for循环，但也无法在模板中实现它。非常感谢，但我问的主要是继续计数。我的意思是，如果第一行是“测试1、测试2、测试3”，那么第二行就是“测试4、测试5、测试6”，依此类推。这是完全不同的，虽然，我有“身份证”与船舶本身。你还有其他解决办法吗？@ErhanYaşar我更新了我的答案，一开始没有意识到你需要每行和每列累积值。在ships的上下文中，除了“shipName”，我还有单独的“shipID”。因此，我的主要目标只是通过分配不同的ID来了解表单元格，稍后我将调用这些ID对它们进行操作。我每次都添加这些行，并且已经为每个列添加了模板。您的解决方案也解决了这个问题，但每次都需要在
columnCount
中静态地分配列值。我甚至试图找到一种动态的方式来编写columnCount:Array（5）.fill（5），但没有找到。你知道吗？？？@ErhanYaşar与
shipID
可以用
ship.shipID
替换
shipID
我仍然不知道你想如何生成你的列，它们是来自每个
ship
的字段，还是你想手工添加它们？我编辑了这个问题，以便向你展示案例的较小版本。您的解决方案使用静态答案而不是动态方式解决。如果你能复制一种思维方式的话，请欣赏并学习一种新的思维方式。非常感谢，但是，我问你。我的意思是，如果第一行是“测试1、测试2、测试3”，那么第二行就是“测试4、测试5、测试6”，依此类推。虽然很不一样，但我有