Cómo iterar a través de las filas de una tabla y obtener los valores de celda usando jQuery
Frecuentes
Visto 125,462 equipos
18
Estoy creando la siguiente tabla dinámicamente usando jQuery... Después de ejecutar mi código, obtengo la siguiente tabla:
<table id="TableView" width="800" style="margin-left: 60px">
<tbody>
<tr>
<th>Module</th>
<th>Message</th>
</tr>
<tr class="item">
<td> car</td>
<td>
<input class="name" type="text">
</td>
<td>
<input class="id" type="hidden" value="5">
</td>
</tr>
<tr class="item">
<td> bus</td>
<td>
<input class="name" type="text">
</td>
<td>
<input class="id" type="hidden" value="9">
</td>
</tr>
Solía iterar la tabla de esta manera:
$("tr.item").each(function() {
var quantity1 = $this.find("input.name").val();
var quantity2 = $this.find("input.id").val();
});
Al utilizar la consulta anterior, solo obtengo valores de las celdas de la primera fila ... ayúdenme con jQuery que recorrerá todas las filas de la tabla y obtendrá los valores de las celdas de la fila en quantity1
y quantity2
.
5 Respuestas
41
$(this)
en lugar de $ esto
$("tr.item").each(function() {
var quantity1 = $(this).find("input.name").val(),
quantity2 = $(this).find("input.id").val();
});
contestado el 04 de mayo de 12 a las 05:05
9
Recorrer una tabla para cada fila y leer el valor de la primera columna funciona mediante el uso de la lógica JQuery y DOM.
var i = 0;
var t = document.getElementById('flex1');
$("#flex1 tr").each(function() {
var val1 = $(t.rows[i].cells[0]).text();
alert(val1) ;
i++;
});
Respondido 15 Jul 15, 16:07
6
Hola a todos, gracias por la ayuda. A continuación se muestra el código de trabajo para mi pregunta.
$("#TableView tr.item").each(function() {
var quantity1=$(this).find("input.name").val();
var quantity2=$(this).find("input.id").val();
});
Respondido 20 Feb 20, 05:02
4
Obtuviste tu respuesta, pero ¿por qué iterar sobre el tr cuando puedes ir directamente a las entradas? De esa manera, puede almacenarlos más fácilmente en una matriz y reducir la cantidad de consultas CSS. Depende de lo que quiera hacer, por supuesto, pero para recopilar datos es un enfoque más flexible.
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);
contestado el 03 de mayo de 12 a las 16:05
2
Lo conseguí y lo expliqué a continuación:
//Esta tabla con dos filas que contienen cada fila, una selección en el primer td y una entrada de etiquetas en el segundo td y la segunda entrada en el tercero td;
<table id="tableID" class="table table-condensed">
<thead>
<tr>
<th><label>From Group</lable></th>
<th><label>To Group</lable></th>
<th><label>Level</lable></th>
</tr>
</thead>
<tbody>
<tr id="rowCount">
<td>
<select >
<option value="">select</option>
<option value="G1">G1</option>
<option value="G2">G2</option>
<option value="G3">G3</option>
<option value="G4">G4</option>
</select>
</td>
<td>
<input type="text" id="" value="" readonly="readonly" />
</td>
<td>
<input type="text" value="" readonly="readonly" />
</td>
</tr>
<tr id="rowCount">
<td>
<select >
<option value="">select</option>
<option value="G1">G1</option>
<option value="G2">G2</option>
<option value="G3">G3</option>
<option value="G4">G4</option>
</select>
</td>
<td>
<input type="text" id="" value="" readonly="readonly" />
</td>
<td>
<input type="text" value="" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-default generate-btn search-btn white-font border-6 no-border" id="saveDtls">Save</button>
//call on click of Save button;
$('#saveDtls').click(function(event) {
var TableData = []; //initialize array;
var data=""; //empty var;
//Here traverse and read input/select values present in each td of each tr, ;
$("table#tableID > tbody > tr").each(function(row, tr) {
TableData[row]={
"fromGroup": $('td:eq(0) select',this).val(),
"toGroup": $('td:eq(1) input',this).val(),
"level": $('td:eq(2) input',this).val()
};
//Convert tableData array to JsonData
data=JSON.stringify(TableData)
//alert('data'+data);
});
});
Respondido 17 Abr '18, 10:04
Lo siento, Sr. Quill, soy nuevo en Stackoverflow y esta es la primera respuesta que publiqué yo. - Manohar Kokkula
Debajo de tu publicación hay un enlace "editar". Edite su publicación para mejorar el formato, puede ver cómo se verá la respuesta mientras la edita. - Simón Forsberg
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery ajax html-table or haz tu propia pregunta.
Intenté con $ (esto) también, pero solo obtengo los primeros datos de la celda tr: Brittas
@Brittas ver el violín
console.log
, te da todo el valor - laparadoja del código