Question

我无法相信这花了多长时间，但我似乎无法弄清楚如何在用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。

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

Answer 2

在代码下面提供

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

Answer 3

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

alert(col.firstChild.innerHTML);

Answer 4

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

I.e：alert(col.innerHTML);

然后，您需要针对您正在寻找的任何值进行解析。

Answer 5

代码哟已提供运行正常。请记住，如果标题中包含代码，则需要等待首先加载dom。在jQuery中，只需将代码放在$(function(e){...});

中即可

在正常的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>

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

Answer 7

您是否尝试过innerHTML？

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

Answer 8

一些问题：

for语句中的循环条件是赋值，而不是循环检查，因此它可能是无限循环
你应该对那些行/单元集合使用item（）函数，不确定数组索引是否适用于那些（实际上不是JS数组）
您应声明行/ 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。

Answer 9

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

alert(col.firstChild.value);

Answer 10

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

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

Answer 11

我知道这就像是多年的帖子，但是由于没有选定的答案，我希望这个答案可以给您您所期望的...

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

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

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

12 个答案: