Junco Fuerte Junco Fuerte - 24 days ago 6
HTML Question

How to set index variables in filters and selectors jquery

I have the following row structure that serves as a template to clone it and add it to a table each time a user presses an "Add" button, This template is hidden:

<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>


When the "add" button is pressed, invokes:

$("#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);
});


The first line, generates the sequence of the row number. The second line clones the entire template as a new row in the table and adds an id = nid to the .
The third line, accesses the row and looks for the select to add the nid sequential to the select id, but this does not work. When doing several tests, I conclude that the problem is that "tr: eq (nid)" does not accept the nid as variable, because when changing the nid by a specific integer, for example 1, it works, adding id to select. The question here is how to put the nid as a parameter in the: eq () so that it works correctly and do what I have explained ????

The same situation happens in the following line of code:

$(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();
});


Of lines 1 to 3, you get the number of the row in which you have selected in the select component.
The last line gets the value of the select that was selected, with the information of the row number where the selection was made, but this does not work. When doing several tests, I conclude that the problem is in "tr [id = idd]", which does not correctly process the variable "idd". I made the test of changing the idd by a specific integer, for example 1 and then I generate a new line in the table with id = 1 and the line of code works correctly, returning the option that was selected in the select element.

With these two examples, I want to check if someone can tell me how to place the parameters I mentioned in the two cases, so that the functionality is executed correctly and does what is expected.

I will be enormously grateful.

Answer

the issue is you have to give ("#plantilla tbody tr:eq(nid)" as (("#plantilla tbody tr:eq('"+nid+"')"

I have created a fiddle. check it out. I didn't use jquery for the same.

<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/