用JavaScript从表单元中获取值…而不是jQuery

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。

10 个解决方案

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

#2

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

#3

If I understand your question correctly, you are looking for innerHTML:

如果我没看错你的问题，你是在找innerHTML:

alert(col.firstChild.innerHTML);

#4

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

您提供的代码运行良好。请记住，如果在header中有代码，则需要等待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中使用windows . 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>

#5

If you are looking for the contents of the TD (cell), then it would simply be: col.innerHTML

如果您正在查找TD (cell)的内容，那么它应该是:col.innerHTML

I.e: alert(col.innerHTML);

我。艾凡:警报(col.innerHTML);

You'll then need to parse that for any values you're looking for.

然后，您需要对要查找的任何值进行解析。

#6

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 innerHTML or the appropriate (browser-specific) variation on innerText.

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

#7

A few problems:

几个问题:

The loop conditional in your for statements is an assignment, not a loop check, so it might infinite loop

for语句中的循环条件是赋值，而不是循环检查，因此它可能是无限循环
You should use the item() function on those rows/cells collections, not sure if array index works on those (not actually JS arrays)

应该在这些行/单元格集合上使用item()函数，不确定数组索引是否在这些集合上工作(实际上不是JS数组)
You should declare the row/col objects to ensure their scope is correct.

您应该声明行/col对象，以确保它们的作用域是正确的。

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而不是文本内容，就用innerHTML替换它。

#8

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

#9

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

#10

Try this out: alert(col.firstChild.data)

试试这个:警报(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”、“nodeValue”、“textContent”还是“wholeText”字段?

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

#2