[英]How to iterate through a table rows and get the cell values using jQuery
我正在使用 jQuery 动态创建下表...执行我的代码后,我得到如下表:
<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>
我曾经像这样迭代表:
$("tr.item").each(function() {
var quantity1 = $this.find("input.name").val();
var quantity2 = $this.find("input.id").val();
});
通过使用上面的查询,我只获取第一行单元格的值...帮助我使用 jQuery,它将遍历表的整个行并获取quantity1
和quantity2
的行单元格值。
使用 JQuery 和 DOM 逻辑为每一行循环一个表并读取第一列值。
var i = 0;
var t = document.getElementById('flex1');
$("#flex1 tr").each(function() {
var val1 = $(t.rows[i].cells[0]).text();
alert(val1) ;
i++;
});
大家好,感谢下面的帮助是我的问题的工作代码
$("#TableView tr.item").each(function() {
var quantity1=$(this).find("input.name").val();
var quantity2=$(this).find("input.id").val();
});
你得到了答案,但是当你可以直接获取输入时,为什么还要迭代 tr 呢? 这样你就可以更容易地将它们存储到数组中,并减少 CSS 查询的数量。 当然取决于你想做什么,但对于收集数据来说,这是一种更灵活的方法。
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);
我得到它并在下面解释:
//这个表有两行,每行包含一个,第一个td中有一个select,第二个td中有一个输入标签,第三个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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.