如何在過濾器和選擇器中設置索引變量

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/