使用TD標籤中的數據創建數組

我想將HTML表導出到由JavaScript程序創建的電子表格中。我已經考慮過通過JQuery庫來做這件事，但我不太瞭解，也不認爲在我的情況下它會被允許。我看到一個使用XML的解決方案，但我對XML也不太瞭解。我打算做的是創建一個2維數組並將該數組的內容導出到Excel中。不幸的是，我無法控制標記方案，我必須使用getElementsByTagName。標記方案是通過報告軟件創建的。使用TD標籤中的數據創建數組

下面的代碼循環到第二行，但它停在第二行。我無法弄清楚我做錯了什麼。我希望有人能夠解釋這個錯誤的補救措施。

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

來源

2014-09-03 user2901516

你所需的最終結果是一個JSON數組？表是如何創建的？將原始數據轉換爲表格並導出之前沒有更多意義嗎？ afaik複製並從html頁面粘貼到電子表格手動工作。也許更好的解決方案可能是看看添加一個「複製」按鈕，如zClip http://www.steamdev.com/zclip/？ – haxxxton 2014-09-03 03:08:14

以您目前的邏輯，你有幾個問題：

陣列1被初始化爲[[]]
R（行計數器）從不增加
您的循環：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

來源

2014-09-03 03:10:01 dc5

問題1：您格式化工作。當您正確縮進，使用新的線條並使用描述性變量名稱時，調試自己的代碼會容易得多。

問題2：Uncaught TypeError: Cannot set property '0' of undefined在線19你試圖設置array1[0][0]時array1[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的餘數。它在這裏完美運作。我們還可以增加r當c % numCol爲0

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

問題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; 
    } 
}

Working example

來源

2014-09-03 03:30:18 Meredith

使用TD標籤中的數據創建數組

回答

相關問題