Javascript 如何遍历表格行并使用 jQuery 获取单元格值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10434711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to iterate through a table rows and get the cell values using jQuery
提问by Brittas
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 quantity1and quantity2.
通过使用上面的查询我收到第一行单元格值仅...帮助我与jQuery将通过该表的完整行迭代，并在获得该行的单元格值quantity1和quantity2。
回答by thecodeparadox
回答by smac2020
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++;
});
回答by Brittas
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();
});
回答by GillesC
You got your answer, but why iterate over the tr when you can go straight for the inputs? That way you can store them easier into an array and it reduce the number of CSS queries. Depends what you want to do of course, but for collecting data it is a more flexible approach.
你得到了答案，但是当你可以直接获取输入时，为什么还要迭代 tr 呢？这样你可以更容易地将它们存储到数组中，并减少 CSS 查询的数量。当然取决于你想做什么，但对于收集数据来说，这是一种更灵活的方法。
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);?
回答by Manohar Kokkula
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);
});
});
