Question

我想将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>

Answer 1

问题1 ：处理格式化问题。当你正确缩进，有效地使用新行并使用描述性变量名时，调试自己的代码要容易得多。

第19行

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

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

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

第24行

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

第4期：使用3个索引（for (var i=0;i<NumTD;i++)，r和c）进行混乱是不必要的，并且不会让事情变得更容易。例如，i和c始终相等，因此我们可以运行从i到c = 0的循环。

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

c % numCol

Working example

问题6 ：这种方法通常是完成任务的笨拙方式。抓住每一行，迭代它们然后抓住单个单元格会更加清晰。修改：在我看到@ dc5的编辑之前，这是正确的。他的作品也一样。

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

Working example

Answer 2

根据您当前的逻辑，您有几个问题：

array1初始化为[[]]
r（行计数器）永不递增
您的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 demo

通过首先查询表行，然后迭代行，查询每个找到的行的子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 demo

使用TD标签创建包含数据的数组

2 个答案: