Javascript 如何在html表中单独寻址行？

我有我的小桌子，在那里我可以首先从下拉列表中选择性别。然后，此选择将限制第二个下拉列表的选择

现在的问题是，如果我在第一个条目中选择例如“Männlich”，并在按钮上添加第二行，我在第二个下拉列表中根据我选择“Männlich”的第一行设置了限制

如何分别为每一行进行选择？有人能帮我吗

$（'selectOption1'）。打开（'change'，setAnrede）；
函数setAnrede（）{
if（$（this.val（）=='Männlich'）{
$（'.input field option[value=“Sehr geehrte”]'）。hide（）；
$（'.input field option[value=“Liebe”]'）。hide（）；
$（'.input field option[value=“Werte”]'）。hide（）；
$（'.input field option[value=“Sehr geehrter”]'）。show（）；
$（'.input field option[value=“Lieber”]'）。show（）；
$（'.input field option[value=“Werter”]'）。show（）；
}
if（$（this.val（）=='Weiblich'）{
$（'.input field option[value=“Sehr geehrter”]'）。hide（）；
$（'.input field option[value=“Lieber”]'）。hide（）；
$（'.input field option[value=“Werter”]'）。hide（）；
$（'.input field option[value=“Sehr geehrte”]'）。show（）；
$（'.input field option[value=“Liebe”]'）。show（）；
$（'.input field option[value=“Werte”]'）。show（）；
}
}
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var colCount=table.rows[1].cells.length；
对于（变量i=0；i正如我在评论中已经说过的，动态生成的行不会对性别的变化做出反应，因为单击事件没有绑定。这可以通过将
$（'#selectOption1'）。on（'change'，setAnrede）；
更改为

$('table').on('change', '.genderSelect', setAnrede); 

这会将事件绑定到表，但仅当更改事件与类为
.genderSelect
（您现在将其添加到选择框中）的子元素匹配时才会激发

首先，与显示/隐藏不需要的值不同，我更喜欢仅在选择性别时设置选项。
此外，我喜欢只在代码中指定选择框的选项，主要是为了避免
if
语句或由于错误销售而导致的错误。
因此，在脚本的开头，我创建了一个对象，用于填充两个选择框的选项

 var gsAddress = {
   "neutral": ["Guden", "Hallo", "Moin"],
   "male": ["Sehr geehrter", "Werter", "Lieber"],
   "female": ["Sehr geehrte", "Werte", "Liebe"]
 };

正如我所说，我想使用上面的对象用选项填充两个选择框

第一个选择框（genderSelect）需要一个新函数，该函数在document ready函数中调用：

$(".genderSelect").each(prefillGenderSelect); //don't forget to add the class to the select element

function prefillGenderSelect() {
   var curSelBox = this; //assign the current context to a variable
   $.each(gsAddress, function(key, value) { // loop through the object, created above
     var newOption = $('<option/>', {
       'value': key, // the current gender where you're cycling through
       'class': 'anyClass', // add any needed classes for <option>
       'text': key // same again as value (but can be different)
     }).appendTo(curSelBox);
   })
 }

$（“.genderSelect”）.each（prefillGenderSelect）；//不要忘记将类添加到select元素中
函数prefillGenderSelect（）{
var curSelBox=this；//将当前上下文分配给变量
$.each（gsAddress，function（key，value）{//通过上面创建的对象循环
var newOption=$（''{
'value'：key，//循环通过的当前性别
'class'：'anyClass'，//为添加所需的任何类
“text”：键//与值相同（但可以不同）
}).附录（光标框）；
})
}

更改genderSelect后，setAnrede将立即启动并用其选项填充gsAddress选择框。
我的setAnrede函数如下所示：

function setAnrede() {
   var myRow = $(this).closest("tr"); // travel up your DOM
   var curSelectBox = myRow.find(".gsAddress"); //travel down your DOM and find your select Box
   $(curSelectBox).find("option").remove(); //wipe out all existing options

   $.each(gsAddress[$(this).val()], function(index, value) { //gs for gender specific

     var newOption = $('<option/>', {
       'value': value, // the current gsAdress where you're cycling through
       'class': 'anyClass', // add any needed classes for <option>
       'text': value // same again as value(but can be different)
     }).appendTo(curSelectBox);
   });
 }

函数setAnrede（）{
var myRow=$（this）.closest（“tr”）；//向上移动DOM
var curSelectBox=myRow.find（“.gsAddress”）；//遍历DOM并找到选择框
$（curSelectBox）.find（“option”）.remove（）；//清除所有现有选项
$.each（gsAddress[$（this）.val（）]，函数（index，value）{//gs用于性别特定
var newOption=$（''{
'value'：value，//循环通过的当前gsaddress
'class'：'anyClass'，//为添加所需的任何类
“文本”：值//与值相同（但可以不同）
}).附录（方框）；
});
}

用于“添加行”按钮。您不应复制第一行，而应将默认行定义为对象，并简单地将其附加到表中。这与前面创建的“选项”对象类似

var defaultRow = $("<tr/>"); //if there are attributes like class and id needed, add them like in the option declaration.

var exampleCell = $("<td/>", {    //every cell needs to be defined, ofc
  'class' : 'aTableCell'         //if you need to add class information to the td
  }
$(defaultRow).append(exampleCell); //and if it is created, append it into your row
$("#myTable").append(defaultRow); // in the end, just append the complete row to your table

var defaultRow=$（“”）；//如果需要class和id等属性，请在选项声明中添加它们。
var exampleCell=$（“”，{//每个单元格都需要定义，ofc
'class'：'aTableCell'//如果需要将类信息添加到td
}
$（defaultRow）.append（exampleCell）；//如果创建了它，则将其追加到行中
$（“#myTable”）.append（defaultRow）；//最后，只需将完整的行追加到表中即可

我已经创建了一个可以工作的fiddle。但是我将html缩减到了所需的最小值，并使用jquery的.clone（）函数实现了一个简单的addRow按钮。这只是为了看看它是否还在处理新行。
.clone（）还复制元素的id（当它们存在时）。因此，如果需要id，则不应进行克隆。。。
这里有一个链接：
对于
元素，使用
名称=
属性而不是
id=
。特别是，与您的情况类似，当创建复制第一行的其他行时，有多个元素具有相同的id。这不应该发生在html文档中