jQuery 如何使用jQuery获取表格单元格值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/376081/
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 get a table cell value using jQuery?
提问by Sean Taylor
I am trying to work out how to get the value of table cell for each row using jQuery.
我正在尝试找出如何使用 jQuery 获取每一行的表格单元格的值。
My table looks like this:
我的桌子看起来像这样：
<table id="mytable">
<tr>
<th>Customer Id</th>
<th>Result</th>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
<tr>
<td>789</td>
<td></td>
</tr>
</table>
I basically want to loop through the table, and get the value of the Customer Idcolumn for each row.
我基本上想遍历表，并获取Customer Id每一行的列值。
In the code below I have worked out that I need to do this to get it looping through each row, but I'm not sure how to get the value of the first cell in the row.
在下面的代码中，我已经确定我需要这样做才能让它循环遍历每一行，但我不确定如何获取行中第一个单元格的值。
$('#mytable tr').each(function() {
var cutomerId =
}
回答by Jennifer
If you can, it might be worth using a class attribute on the TD containing the customer ID so you can write:
如果可以，可能值得在包含客户 ID 的 TD 上使用类属性，以便您可以编写：
$('#mytable tr').each(function() {
var customerId = $(this).find(".customerIDCell").html();
});
Essentially this is the same as the other solutions (possibly because I copy-pasted), but has the advantage that you won't need to change the structure of your code if you move around the columns, or even put the customer ID into a <span>, provided you keep the class attribute with it.
本质上，这与其他解决方案相同（可能是因为我复制粘贴了），但优点是如果您在列中移动，甚至不需要更改代码结构，甚至将客户 ID 放入<span>，前提是您保留了 class 属性。
By the way, I think you could do it in one selector:
顺便说一句，我认为您可以在一个选择器中完成：
$('#mytable .customerIDCell').each(function() {
alert($(this).html());
});
If that makes things easier.
如果这让事情变得更容易。
回答by Andreas Grech
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.
您正在做的是遍历表中的所有 trs，在循环中的当前 tr 中找到第一个 td，并提取其内部 html。
To select a particular cell, you can reference them with an index:
要选择特定单元格，您可以使用索引引用它们：
$('#mytable tr').each(function() {
var customerId = $(this).find("td").eq(2).html();
});
In the above code, I will be retrieving the value of the third row(the index is zero-based, so the first cell index would be 0)
在上面的代码中，我将检索第三行的值（索引从零开始，所以第一个单元格索引将为 0）
Here's how you can do it without jQuery:
以下是不使用 jQuery 的方法：
var table = document.getElementById('mytable'),
rows = table.getElementsByTagName('tr'),
i, j, cells, customerId;
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
customerId = cells[0].innerHTML;
}
?
?
回答by Jimmy
a less-jquerish approach:
一个不太jquerish的方法：
$('#mytable tr').each(function() {
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
});
this can obviously be changed to work with not-the-first cells.
这显然可以更改为使用非第一个单元格。
回答by Strelok
$('#mytable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
回答by Nikhil Dinesh
Try this,
尝试这个，
$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
alert(data.target.innerHTML);//this will show the inner html
alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
});
});
回答by MOH3n MOH
Y not you use id for that column? say that:
你不是在那个列中使用 id 吗？比如说：
<table width="300" border="1">
<tr>
<td>first</td>
</tr>
<tr>
<td>second</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td id="result">Where the result should occur</td>
</tr>
</table>
<script type="text/javascript">
$('#result').html("The result is....");
</script>
回答by David
This works
这有效
$(document).ready(function() {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
$("#tbl").children().children()[row].children[col].innerHTML = "H!";
}
}
});
回答by jithin
$(document).ready(function() {
var customerId
$("#mytable td").click(function() {
alert($(this).html());
});
});
回答by mohammad
try this :
尝试这个 ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function getVal(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
alert(targ.innerHTML);
}
onload = function() {
var t = document.getElementById("main").getElementsByTagName("td");
for ( var i = 0; i < t.length; i++ )
t[i].onclick = getVal;
}
</script>
<body>
<table id="main"><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr></table>
</body>
</html>
回答by Gazmend Hoxha
A working example: http://jsfiddle.net/0sgLbynd/
一个工作示例：http: //jsfiddle.net/0sgLbynd/
<table>
<tr>
<td>0</td>
<td class="ms-vb2">1</td>
<td class="ms-vb2">2</td>
<td class="ms-vb2">3</td>
<td class="ms-vb2">4</td>
<td class="ms-vb2">5</td>
<td class="ms-vb2">6</td>
</tr>
</table>
$(document).ready(function () {
//alert("sss");
$("td").each(function () {
//alert($(this).html());
$(this).html("aaaaaaa");
});
});
