[英]How to iterate through a table rows and get the cell values using jQuery
I am creating the below table dynamically using jQuery... After executing my code I get the table as below:我正在使用 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>
I used to iterate the table like this:我曾经像这样迭代表:
$("tr.item").each(function() {
var quantity1 = $this.find("input.name").val();
var quantity2 = $this.find("input.id").val();
});
By using the above query I am getting values of first row cells only... help me with jQuery that will iterate through the whole rows of the table and get the row cell values in quantity1
and quantity2
.通过使用上面的查询,我只获取第一行单元格的值...帮助我使用 jQuery,它将遍历表的整个行并获取
quantity1
和quantity2
的行单元格值。
Looping through a table for each row and reading the 1st column value works by using JQuery and DOM logic.使用 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++;
});
Hello every one thanks for the help below is the working code for my question大家好,感谢下面的帮助是我的问题的工作代码
$("#TableView tr.item").each(function() {
var quantity1=$(this).find("input.name").val();
var quantity2=$(this).find("input.id").val();
});
You got your answer, but why iterate over the tr when you can go straight for the inputs?你得到了答案,但是当你可以直接获取输入时,为什么还要迭代 tr 呢? That way you can store them easier into an array and it reduce the number of CSS queries.
这样你就可以更容易地将它们存储到数组中,并减少 CSS 查询的数量。 Depends what you want to do of course, but for collecting data it is a more flexible approach.
当然取决于你想做什么,但对于收集数据来说,这是一种更灵活的方法。
http://jsfiddle.net/zqpgq/ http://jsfiddle.net/zqpgq/
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);
I got it and explained in below:我得到它并在下面解释:
//This table with two rows containing each row, one select in first td, and one input tags in second td and second input in third td; //这个表有两行,每行包含一个,第一个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.