如何使用 jQuery 获取表格单元格值？
Posted
技术标签:
【中文标题】如何使用 jQuery 获取表格单元格值？【英文标题】：How to get a table cell value using jQuery? 【发布时间】：2010-09-27 10:13:41 【问题描述】：我正在尝试研究如何使用 jQuery 获取每一行的表格单元格的值。
我的桌子是这样的：
<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>
我基本上是想遍历表格，并获取每一行的Customer Id 列的值。
在下面的代码中，我发现我需要这样做才能让它遍历每一行，但我不确定如何获取行中第一个单元格的值。
$('#mytable tr').each(function()
var cutomerId =
【问题讨论】：
【参考方案1】：如果可以，可能值得在 TD 上使用包含客户 ID 的类属性，以便您可以编写：
$('#mytable tr').each(function()
var customerId = $(this).find(".customerIDCell").html();
);
基本上这与其他解决方案相同（可能是因为我复制粘贴了），但优点是，如果您在列中移动，甚至不需要更改代码结构，甚至将客户放在将 ID 转换为 <span>，前提是您保留了 class 属性。
顺便说一句，我认为您可以在一个选择器中完成：
$('#mytable .customerIDCell').each(function()
alert($(this).html());
);
如果这能让事情变得更容易的话。
【讨论】：
我会说 $('#mytable td.customerIDCell').each(function() alert($(this).html()); );但是+1 :-) 谢谢 - 但是如果你想把它放到一个跨度中怎么办（我的答案中的跨度可能格式错误！） 如果您碰巧在 中有$('#mytable tr').each(function()
var customerId = $(this).find("td:first").html();
);
您正在做的是遍历表中的所有 trs，在循环中找到当前 tr 中的第一个 td，并提取其内部 html。
要选择特定的单元格，您可以使用索引来引用它们：
$('#mytable tr').each(function()
var customerId = $(this).find("td").eq(2).html();
);
在上面的代码中，我将检索 第三行 的值（索引是从零开始的，所以第一个单元格索引是 0）
以下是不使用 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;
【讨论】：
谢谢，这对我来说更有用，因为我无法控制我希望使用 jQuery 解析的文档的标记。所以能够使用“td:first”、“td:last”等对我们很有帮助。 eq(2) 将获得第三列的值，而不是第三行。 代码中的 eq(2) 是什么？我的意思是 2 是哪个 td 或 tr 的索引？ @Singhtd 集合的索引 2 处的元素，由 find("td") 函数返回。
我喜欢选项 2，索引为 ref，我的小提琴 here【参考方案3】：
一种不那么古怪的方法：
$('#mytable tr').each(function()
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
);
这显然可以更改为使用非第一个单元格。
【讨论】：
【参考方案4】：$('#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();
);
【讨论】：
第一行不用跳过，因为它包含试试这个，
$(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.
);
);
【讨论】：
第二个元素，不是第一个，eq从0开始【参考方案6】：这行得通
$(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!";
);
【讨论】：
【参考方案7】：试试这个：
<!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>
【讨论】：
【参考方案8】：$(document).ready(function()
var customerId
$("#mytable td").click(function()
alert($(this).html());
);
);
【讨论】：
【参考方案9】：一个工作示例： 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");
);
);
【讨论】：
以上是关于如何使用 jQuery 获取表格单元格值？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 JavaScript 获取 html 表格 td 单元格值？
如何使用 PHP 简单的 html dom 获取特定的表格单元格值