在 JavaScript 中从表格单元格中获取值......不是 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3072233/
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
Getting value from table cell in JavaScript...not jQuery
提问by GregH
I can't believe how long this has taken me but I can't seem to figure out how to extract a cell value from an HTML table as I iterate through the table with JavaScript. I am using the following to iterate:
我不敢相信这花了我多长时间，但当我使用 JavaScript 遍历表格时，我似乎无法弄清楚如何从 HTML 表格中提取单元格值。我正在使用以下内容进行迭代：
var refTab=document.getElementById("ddReferences")
var ttl;
// Loop through all rows and columns of the table and popup alert with the value
// /content of each cell.
for ( var i = 0; row = refTab.rows[i]; i++ ) {
row = refTab.rows[i];
for ( var j = 0; col = row.cells[j]; j++ ) {
alert(col.firstChild.nodeValue);
}
}
What is the correct call I should be putting in to the alert() call to display the contents of each cell of my HTML table? This should be in JS...can't use jQuery.
我应该在 alert() 调用中输入什么正确调用来显示 HTML 表格的每个单元格的内容？这应该在 JS 中...不能使用 jQuery。
回答by brendan
function GetCellValues() {
var table = document.getElementById('mytable');
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
alert(table.rows[r].cells[c].innerHTML);
}
}
}
回答by Sarfraz
If I understand your question correctly, you are looking for innerHTML:
如果我正确理解您的问题，您正在寻找innerHTML：
alert(col.firstChild.innerHTML);
回答by pota opt
confer below code
授予以下代码
<html>
<script>
function addRow(){
var table = document.getElementById('myTable');
//var row = document.getElementById("myTable");
var x = table.insertRow(0);
var e =table.rows.length-1;
var l =table.rows[e].cells.length;
//x.innerHTML = " ";
for (var c =0, m=l; c < m; c++) {
table.rows[0].insertCell(c);
table.rows[0].cells[c].innerHTML = " ";
}
}
function addColumn(){
var table = document.getElementById('myTable');
for (var r = 0, n = table.rows.length; r < n; r++) {
table.rows[r].insertCell(0);
table.rows[r].cells[0].innerHTML = " " ;
}
}
function deleteRow() {
document.getElementById("myTable").deleteRow(0);
}
function deleteColumn() {
// var row = document.getElementById("myRow");
var table = document.getElementById('myTable');
for (var r = 0, n = table.rows.length; r < n; r++) {
table.rows[r].deleteCell(0);//var table handle
}
}
</script>
<body>
<input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
<input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
<input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
<input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>
<table id='myTable' border=1 cellpadding=0 cellspacing=0>
<tr id='myRow'>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
回答by Jamie Krcmar
the above guy was close but here is what you want:
上面那个人很接近，但这是你想要的：
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
alert(table.rows[r].cells[c].firstChild.value);
}
}
}catch(e) {
alert(e);
}
回答by Java Drinker
The code yo have provided runs fine. Remember that if you have your code in the header, you need to wait for the dom to be loaded first. In jQuery it would just be as simple as putting your code inside $(function(e){...});
您提供的代码运行良好。请记住，如果您的代码位于标头中，则需要先等待 dom 被加载。在 jQuery 中，就像将代码放入其中一样简单$(function(e){...});
In normal javascript use window.onLoad(..) or the like... or have the script after the table defnition (yuck!). The snippet you provided runs fine when I have it that way for the following:
在普通的 javascript 中使用 window.onLoad(..) 或类似的......或者在表定义之后使用脚本（糟糕！）。当我以这种方式为以下内容提供时，您提供的代码段运行良好：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<table id='ddReferences'>
<tr>
<td>dfsdf</td>
<td>sdfs</td>
<td>frtyr</td>
<td>hjhj</td>
</tr>
</table>
<script>
var refTab = document.getElementById("ddReferences")
var ttl;
// Loop through all rows and columns of the table and popup alert with the value
// /content of each cell.
for ( var i = 0; row = refTab.rows[i]; i++ ) {
row = refTab.rows[i];
for ( var j = 0; col = row.cells[j]; j++ ) {
alert(col.firstChild.nodeValue);
}
}
</script>
</body>
</html>
回答by Ben Madsen
If you are looking for the contents of the TD (cell), then it would simply be: col.innerHTML
如果您正在寻找 TD（单元格）的内容，那么它就是： col.innerHTML
I.e: alert(col.innerHTML);
IE： alert(col.innerHTML);
You'll then need to parse that for any values you're looking for.
然后，您需要为您正在寻找的任何值解析它。
回答by David
A few problems:
几个问题：
The loop conditional in your for statements is an assignment, not a loop check, so it might infinite loop
You should use the item() function on those rows/cells collections, not sure if array index works on those (not actually JS arrays)
You should declare the row/col objects to ensure their scope is correct.
for 语句中的循环条件是赋值，而不是循环检查，因此它可能是无限循环
您应该在这些行/单元格集合上使用 item() 函数，不确定数组索引是否适用于那些（实际上不是 JS 数组）
您应该声明行/列对象以确保它们的范围是正确的。
Here is an updated example:
这是一个更新的示例：
var refTab=document.getElementById("ddReferences")
var ttl;
// Loop through all rows and columns of the table and popup alert with the value
// /content of each cell.
for ( var i = 0; i<refTab.rows.length; i++ ) {
var row = refTab.rows.item(i);
for ( var j = 0; j<row.cells.length; j++ ) {
var col = row.cells.item(j);
alert(col.firstChild.innerText);
}
}
Replace innerText with innerHTML if you want HTML, not the text contents.
如果您需要 HTML，而不是文本内容，请将 innerText 替换为 innerHTML。
回答by GregH
Guess I'm going to answer my own questions....Sarfraz was close but not quite right. The correct answer is:
猜猜我要回答我自己的问题...... Sarfraz 很接近但不太正确。正确答案是：
alert(col.firstChild.value);
回答by Pointy
Have you tried innerHTML?
你试过innerHTML吗？
I'd be inclined to use getElementsByTagName()to find the <tr>elements, and then on each to call it again to find the <td>elements. To get the contents, you can either use innerHTMLor the appropriate (browser-specific) variation on innerText.
我倾向于使用getElementsByTagName()来查找<tr>元素，然后在每个上再次调用它来查找<td>元素。要获取内容，您可以使用innerHTML或 上适当的（特定于浏览器的）变体innerText。
回答by KaliCharan
Try this out: alert(col.firstChild.data)
试试这个： alert(col.firstChild.data)
Check this out for the difference between nodeValue and data: When working with text nodes should I use the "data", "nodeValue", "textContent" or "wholeText" field?
查看 nodeValue 和 data 之间的区别： 使用文本节点时，我应该使用“data”、“nodeValue”、“textContent”还是“wholeText”字段？
