如何在过滤器和选择器中设置索引变量

Question

我有以下行结构作为模板来克隆它，并在用户每次按下“添加”按钮时将其添加到表中，该模板是隐藏的：

<tr class="plantilla">
<td>
<select class="cmb_arboles" id="cmb_arboles" name="arboles[]">
</select>                                   
</td>
<td>
<input type="text" id="txttoneladas" name="txttoneladas[]"/>
</td>   
<td>
<input type="text" id="txtprecio" name="txtprecio[]"/>
</td>                                       
<td>            
<select id="cmb_destino" name="destino[]">
</select>                                   
</td>
<td class="eliminar_fila">
Eliminar
</td>       
</tr>

当按下“添加”按钮时，调用：

$("#agregar").click(function()
{
nid++;
$("#plantilla tbody tr:eq(0)").clone().attr("id",nid).appendTo("#plantilla tbody");
$("#plantilla tbody tr:eq(nid)").find("td:eq(0)").find("select").attr("id","cmb_arboles_"+nid);
});

第一行生成行号的顺序。 第二行将整个模板克隆为表中的新行，并向其中添加id = nid。 第三行，访问该行，并查找用于将nid顺序添加到选择ID的选择，但这不起作用。 在进行多个测试时，我得出的结论是，问题是“ tr：eq（nid）”不接受nid作为变量，因为当将nid更改为特定整数（例如1）时，它可以工作，并添加id以进行选择。 这里的问题是如何将nid作为参数放入eq（）中，以便它可以正常工作并执行我已解释的内容？

在以下代码行中也会发生相同的情况：

$(document).on('change', '.cmb_arboles', function () {
var $select = $(this);
var $row = $select.closest('tr');
var idd = $row.attr('id');
var valor=$("#tabla tbody tr[id=idd]").find("td:eq(0)").find("select").val();
});

在第1至3行中，您将获得在select组件中选择的行的编号。 最后一行获取所选择的选择的值，以及进行选择的行号的信息，但这不起作用。 在进行几次测试时，我得出的结论是问题出在“ tr [id = idd]”中，它没有正确处理变量“ idd”。 我进行了将idd更改为特定整数（例如1）的测试，然后在表中生成了id = 1的新行，并且代码行正常工作，返回了在select元素中选择的选项。

通过这两个示例，我想检查是否有人可以告诉我如何放置这两种情况下提到的参数，以便正确执行功能并执行预期的操作。

我将不胜感激。

Answer 1

您正在使用$("#tabla tbody tr[id=idd]")的id值进行硬编码，而不使用上面的变量

如果要使用该变量，它将是：

$("#tabla tbody tr[id=" +idd +"]")

但是，使用ID再次搜索同一行是没有意义的，因为您已经将该行元素作为$row

因此更改为：

$(document).on('change', '.cmb_arboles', function () {
   var $select = $(this);
   var $row = $select.closest('tr');   
   var valor=$row.find("td:eq(0) select").val();
});

然后不用担心使用ID，您不需要它们

Answer 2

问题是您必须给（“ #plantilla tbody tr：eq（nid）”为（（“ #plantilla tbody tr：eq（'” + nid +“'）”

我制造了一个小提琴。 看看这个。 我没有使用jQuery的相同。

<style>
 #template {
  display: none;
 }
</style>
<table><tbody id="template">
 <tr class="plantilla">
  <td>
   <select class="cmb_arboles" id="cmb_arboles" name="arboles[]">
   </select>
  </td>
  <td>
   <input type="text" id="txttoneladas" name="txttoneladas[]" />
  </td>
  <td>
   <input type="text" id="txtprecio" name="txtprecio[]" />
  </td>
  <td>
   <select id="cmb_destino" name="destino[]">
   </select>
  </td>
  <td class="eliminar_fila">Eliminar</td>
 </tr></tbody>
</table>
<input type="button" id="agregar" value="Add">
<table>
 <tbody id="plantilla"></tbody>
</table>
<script>
var nid = -1;
document.getElementById('agregar').onclick = function(){
 var table = document.getElementById('plantilla');
 var newRow = document.getElementById('template').innerHTML;
 nid++;
 newRow = newRow.replace('id="cmb_arboles"', 'id="cmb_arboles_'+nid+'"');
 newRow.replace('id="cmb_arboles"', 'id="cmb_arboles_'+nid+'"');
 table.innerHTML += newRow;
}
</script>

https://jsfiddle.net/nugee3s6/