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

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。 第三行，訪問該行並查找select以將nid順序添加到選擇標識，但這不起作用。進行多次測試時，我得出結論：問題是「tr：eq（nid）」不接受nid作爲變量，因爲當將nid更改爲特定整數（例如1）時，它會起作用，並將id添加到select中。這裏的問題是如何將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，你在，你在選擇組件選擇的行號。 最後一行獲取所選擇的選擇的值，以及所選行號的信息，但這不起作用。在做幾次測試時，我得出結論，問題出在「tr [id = idd]」中，它不能正確處理變量「idd」。我做了一個測試，通過一個特定的整數來改變idd，例如1，然後我在id = 1的表中生成一個新行並且代碼行正常工作，返回select元素中選擇的選項。

有了這兩個例子，我想檢查是否有人可以告訴我如何在兩種情況下放置我提到的參數，以便正確執行功能並執行所期望的功能。

我將非常感激。

Answer 1

的問題是，你必須給 （ 「#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/

Answer 2

你很難不使用可變它上面

如果你想使用該變量$("#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，你不需要他們