从 JavaScript 中的表格单元格中获取价值...不是 jQuery答案

【问题标题】：Getting value from table cell in JavaScript...not jQuery从 JavaScript 中的表格单元格中获取价值...不是 jQuery
【发布时间】：2020-07-02 11:55:07
【问题描述】：

我不敢相信这花了我多长时间，但当我使用 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);
     }
  }

我应该对 alert() 调用以显示 HTML 表格的每个单元格的内容的正确调用是什么？这应该在 JS 中...不能使用 jQuery。

【问题讨论】：

你在看什么？你的桌子怎么样？什么浏览器？我复制了你的代码并在一个非常简单的表上运行它，它似乎工作正常。

标签： javascript html

【解决方案1】：

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);
        }
    }
}

【讨论】：

完美！非常感谢。我在一个单元格中得到了文本框值，如下所示。 var textboxVal = table.rows[r].cells[c].childNodes[0].value;
其实上面的解决方案并不完美。你没有得到单元格中的值，但也得到了一大堆格式化标签。
考虑这段代码，甚至更简单： document.querySelector("#table").children[0].children[r].children[c].innerText 其中 r 是行索引，c 是列索引
完美！不错的布伦丹

【解决方案2】：

如果我正确理解您的问题，您正在寻找innerHTML：

alert(col.firstChild.innerHTML);

【讨论】：

第一个孩子！这就是我一直在寻找的东西，TY。

【解决方案3】：

授予以下代码

<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 = "&nbsp;";
 for (var c =0,  m=l; c < m; c++) {
table.rows[0].insertCell(c);
   table.rows[0].cells[c].innerHTML  = "&nbsp;&nbsp;";
}

}




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 =  "&nbsp;&nbsp;" ;

        }

    }

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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
<tr>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

    </table>



</body>
</html>

【讨论】：

【解决方案4】：

我知道这是多年前的帖子，但由于没有选定的答案，我希望这个答案能给你带来你所期望的......

if(document.getElementsByTagName){  
    var table = document.getElementById('table className');
    for (var i = 0, row; row = table.rows[i]; i++) {
    //rows would be accessed using the "row" variable assigned in the for loop
     for (var j = 0, col; col = row.cells[j]; j++) {
     //columns would be accessed using the "col" variable assigned in the for loop
        alert('col html>>'+col.innerHTML);    //Will give you the html content of the td
        alert('col>>'+col.innerText);    //Will give you the td value
        }
      }
    }
}

【讨论】：

如果您觉得此答案对您有所帮助，请单击“此答案有用/有用”的向下箭头按钮下方的勾号

【解决方案5】：

您提供的代码运行良好。请记住，如果您在标头中有代码，则需要先等待 dom 加载。在 jQuery 中，只需将代码放入 $(function(e){...});

在普通的 javascript 中使用 window.onLoad(..) 或类似的......或者在表格定义之后使用脚本（糟糕！）。当我以这种方式为以下内容提供时，您提供的 sn-p 运行良好：

<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>

【讨论】：

【解决方案6】：

上面的人很亲密，但这是你想要的：

       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);
        }

【讨论】：

【解决方案7】：

如果您正在查找 TD（单元格）的内容，那么它就是：col.innerHTML

即：alert(col.innerHTML);

然后，您需要为您要查找的任何值解析它。

【讨论】：

【解决方案8】：

你试过innerHTML吗？

我倾向于使用getElementsByTagName() 来查找<tr> 元素，然后在每个元素上再次调用它以查找<td> 元素。要获取内容，您可以使用innerHTML 或innerText 上的适当（特定于浏览器）变体。

【讨论】：

【解决方案9】：

几个问题：

for 语句中的循环条件是赋值，而不是循环检查，因此它可能是无限循环
您应该在这些行/单元格集合上使用 item() 函数，不确定数组索引是否适用于这些（实际上不是 JS 数组）
您应该声明 row/col 对象以确保其范围正确。

这是一个更新的示例：

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); 
  } 
}

如果您想要 HTML，而不是文本内容，请将 innerText 替换为 innerHTML。

【讨论】：

【解决方案10】：

我想我会回答我自己的问题.... Sarfraz 很接近但不太正确。正确答案是：

alert(col.firstChild.value);

【讨论】：

抱歉，实际上 Safraz 是对的。我必须添加“firstChild”，因为在我的实际代码中，我在单元格中有一个文本输入元素，所以从技术上讲他是对的。

【解决方案11】：

试试这个：警报（col.firstChild.data）

检查一下 nodeValue 和 data 之间的区别： When working with text nodes should I use the "data", "nodeValue", "textContent" or "wholeText" field?

【讨论】：

【解决方案12】：

<script>
    $('#tinh').click(function () {
        var sumVal = 0;
        var table = document.getElementById("table1");

        for (var i = 1; i < (table.rows.length-1); i++) {
            sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
        }


        document.getElementById("valueTotal").innerHTML = sumVal;
    });
</script>

【讨论】：

你的显然在使用 jQuery。
是的，第一行是使用 jQuery。问题明确指出他们不能使用 jQuery。