如何使用 jQuery 循环访问表行并获取单元格值
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
中的行单元格值。
$(this)
而不是$this
$("tr.item").each(function() {
var quantity1 = $(this).find("input.name").val(),
quantity2 = $(this).find("input.id").val();
});
Proof_1
Proof_2
遍历每行的表并读取第一列值的工作原理是使用 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();
});
我明白了,并在下面进行了解释:
此表包含两行,每行包含一行,一行在第一个 td 中选择,一个输入标签在第二个 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);
});
});
你得到了答案,但是当你可以直接输入时,为什么要迭代tr呢?这样,您可以更轻松地将它们存储到数组中,并减少CSS查询的数量。当然,这取决于你想做什么,但对于收集数据来说,这是一种更灵活的方法。
http://jsfiddle.net/zqpgq/
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);
相关文章:
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- jQuery如何获取td单元格值
- 获取关联单元格onchange的值
- 使用 javascript 获取单元格值
- 如何从包含
元素的 javascript 变量中获取单元格数据 - 如何通过单击按钮获取单元格值
- 如何使用 jQuery 循环访问表行并获取单元格值
- 谷歌表格/Javascript:如何“获取单元格”动态值
- Javascript:获取单元格的列 ID
- 如何用javascript/jquery获取单元格中元素的行
- 从自定义小部件onclick内部的dgrid获取单元格值
- JQuery从行对象获取单元格值
- 如何在gridComplete方法上获取单元格值
- 根据第一行的内容从动态HTML表中获取单元格值
- 获取单元格<它有特定的className
- Javascript:如何在当前单元格元素之上获取单元格背景色
- 如何使用JavaScript从表中获取单元格值
- 使用动手表获取单元格数据
- 从HTML中的动态表中获取单元格值