使用TD标签中的数据创建阵列

Create an Array with Data from TD Tags

本文关键字：数据 创建 阵列 TD 标签 使用      更新时间：2023-09-26

我想将HTML表导出到将由JavaScript程序创建的电子表格中。我曾考虑过通过JQuery库来实现这一点，但我对此了解不多，也不认为在我的情况下会允许这样做。我见过一个使用XML的解决方案，但我对XML也不太了解。我打算做的是创建一个二维数组，并将该数组的内容导出到Excel中。不幸的是，我无法控制标记方案，我将不得不使用getElementsByTagName。标记方案是通过报告软件创建的。

下面的代码循环到第二行，但在第二行停止。我不明白我做错了什么。我希望有人能够解释对这个错误的补救办法。

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr><td>a</td><td>1</td></tr>
      <tr><td>b</td><td>2</td></tr>
      <tr><td>c</td><td>3</td></tr>
      <tr><td>d</td><td>4</td></tr>
    </table>
    <script>
      var myNodelist = document.getElementsByTagName("td");
      var NumTD= (document.getElementsByTagName("td").length);
      var NumTR= (document.getElementsByTagName("tr").length);
      var NumCol=NumTD/NumTR;
      var array1 = [[]]; 
      var c=0;
      var r=0;
      alert("NumTD is: "+NumTD);
      for (var i=0;i<=NumTD;i++) {
        alert("On TD: "+i);
        alert(myNodelist[i].innerHTML);
        alert("r: "+r);
        alert("c: "+c); 
        array1[r][c]=myNodelist[i].innerHTML;
        alert("The array is at: "+array1[r][c]);
        if((c+1)==NumCol) {
          c=0;
        } else {
          c++;
        } 
        if(c==0) {
          r++;
        }
      }
    </script>
  </body>
</html>

第1期：处理您的格式。当正确缩进、有效使用新行和使用描述性变量名时，调试自己的代码会容易得多。

第2期：Uncaught TypeError: Cannot set property '0' of undefined，第19行。当array1[0]不是数组时，您正在尝试设置array1[0][0]。在尝试将array[0]用作一个数组之前，您需要将其作为一个数组，如下所示：

if(!array1[i]){
    array1[i] = [];
}

这将检查您的数组是否存在。如果没有，则将其设置为一个空数组。

第3期：Uncaught TypeError: Cannot read property 'innerHTML' of undefined，第24行。您的循环从0运行到8，而myNodeList仅上升到7。将for (var i=0;i<=NumTD;i++)更改为for (var i=0;i<NumTD;i++)通过限制循环的边界来解决这个问题。

第4期：使用3个索引（r、c和i）是不必要的，也不会让事情变得更容易。首先，c和i总是相等的，所以我们可以运行从c = 0到c < numTD的循环。

问题5：检查c + 1是否等于列数是很笨拙的。相反，您的第二个维度应该是c % numCol，它只是c除以numCol的余数。它在这里工作得很好。当c % numCol为0时，我们也可以增加r。

var myNodelist  =   document.getElementsByTagName("td");
var numTD       =   myNodelist.length;
var numTR       =   document.getElementsByTagName("tr").length;
var numCol  =   numTD/numTR;
var array1  =   [];
var r       =   0;
for(var c = 0; c < numTD; c++){
    array1[r]   =   array1[r] || [];
    array1[r][c % numCol]   =   myNodelist[c].innerHTML;
    if(c % numCol){
        r++;
    }
}

工作示例

第6期：这种方法通常是完成任务的笨拙方法。抓取每一行，遍历它们，然后抓取单个单元格会干净得多编辑：在我看到@dc5的编辑之前就知道了。他的作品也不错。

var rows        =   document.getElementsByTagName("tr");
var results     =   [];
for(var i = 0; i < rows.length; i++){
    var cells   =   rows[i].getElementsByTagName("td");
    results[i]  =   [];
    for(var j = 0; j < cells.length; j++){
        results[i][j]   =   cells[j].innerHTML;
    }
}

工作示例

使用当前的逻辑，您会遇到几个问题：

  1. array1初始化为[[]]
  2. r（行计数器）从不递增
  3. 您的for循环：for (var i=0;i<=NumTD;i++)应为for (var i=0;i<NumTD;i++)

从表中读取的值总是更新array1[0,0]和array1[0,1] 处的值

对于当前逻辑，修复方法是在列计数器重置为零时递增r，如果新行不存在，则在新行插入一个新的空数组。

代码：

var myNodelist = document.getElementsByTagName("td");
var NumTD = (document.getElementsByTagName("td").length);
var NumTR = (document.getElementsByTagName("tr").length);
var NumCol = NumTD / NumTR;
var array1 = []; // <== initialize as empty array
var c = 0;
var r = 0;
for (var i = 0; i < NumTD; i++) {
    array1[r] = array1[r] || [];  // <== If array at row doesn't exist, 
                                  //     initialize it to a new array
    array1[r][c] = myNodelist[i].innerHTML;
    if ((c + 1) == NumCol) {
        c = 0;
        r++; // <== increment the row
    } else {
        c++;
    }
}

jsFiddle演示

通过首先查询表行，然后迭代行，为每个找到的行查询子td，可以稍微简化上面的代码。

例如：

var rows =  document.getElementsByTagName("tr");
var rowCount = rows.length;
var r, c, cols, colCount;
var array1 = [];
for (r = 0; r < rowCount; ++r) {
    array1[r] = [];
    cols = rows[r].getElementsByTagName("td");
    colCount = cols.length;
    for(c = 0; c < colCount; ++c) {
        array1[r][c] = cols[c].innerHTML;
    }
}

jsFiddle演示

相关文章：