时间戳

首页 > 解决方案 > 如何在具有多个类的表中按计数重命名表行

jquery - 如何在具有多个类的表中按计数重命名表行

问题描述

这是我的设置，我有一个表格，它是表单的一部分，并且有一组包​​含多个类的行

<table>
  <tr class='class1'><!--all rows will host inputs and a button that can delete this row--></tr>
<!--the first row of a class will contain an add row button, and a set of headers-->
<!--there are about 4 rows for each class-->
  <tr class='class2'></tr>
  <tr class='class3'></tr>
  <tr class='class4'></tr>
<table>



特定类的行将对用户隐藏/不可见，直到他们按下按钮以显示特定类的表行。用户可以通过按下按钮添加行和删除特定行。所有输入都有名称，并且应该自动生成

但是我想保持命名约定一致，保持名称范围可管理。

我开发了一个删除函数，它考虑了行数，并根据其位置重命名所有输入，但这种方法仅适用于没有类的表。这就是我所拥有的。

/*
inputs would look like this 
<input class="class1" name="input11"></input>
<input class="class2" name="input21"></input>
*/
<script>
$(".class1").each(function(){       
  var row_index = $(this).parent().parent().index();
  var newName = "input1"+row_index;
  $(this).attr("name",newName);
});
</script>

我考虑过使用 .count() 命令，但它不会提供我想要的增量命名。

我想防止输入名称重复的情况，并防止输入名称之间存在间隙的情况，
即存在名称为：input13 和 input15 的输入，但 input14 不存在。

标签： jquery

解决方案

您可以遍历文档的匹配元素并将名称与索引连接起来：

var z = 1;
$.each($('.class1:nth-child(n)'),function(){
  var newName = 'Name'+z;
  $(this).attr('name',newName);
z++;
});

推荐阅读