需要幫助瞭解行創建方法之間的區別

我正在編寫代碼以從文件讀取並將其內容寫入表中，然後根據所點擊的行進行操作。需要幫助瞭解行創建方法之間的區別

我創建了一個讀取文件並創建行的jsfiddle，但我很難理解如何選擇正確的行。

我想只選擇行（不包括標題行）與特定ID的表。

我試圖做：

var table = document.getElementById("TableID"); 
var tbod = table.getElementsByTagName("tbody")[0]; 
var rows = tbod.getElementsByTagName("tr");

但由此產生的變量「TBOD」似乎沒有任何內在的HTML，所以變量「行」就是一句。任何人都可以解釋爲什麼看起來沒有被選中？

以下是樣本輸入文件：

input.txt中： http://pastebin.com/d4MqDiYW

來源

2017-03-02 sdMarth

可以使用獲得表中的所有行[添加onclick事件* table.rows *]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows）其中* table *是對錶的引用。 Table section元素（如* tbody *，* thead *等）具有類似的屬性，即該節中的所有行。 – RobG

您正確選擇一切，但太快......

在你的jsfiddle例如，您有以下（修剪代碼相關部分）：

document.getElementById('file').onchange = function() { 
    var reader = new FileReader(); 
    reader.onload = function() { 
    // (create table rows...) 
    // but this doesn't happen until the onload event is fired! 
    } 
    reader.readAsText(this.files[0]); 
    addRowHandlers(); // reader.onload has been defined, but didn't fire yet! 
}

所以，你需要做的，例如，是叫addRowHandlers()從您的onload處理：

... 
reader.onload = function() { 
    // (create table rows...) 
    addRowHandlers(); // now there are rows to select :) 
}

來源

2017-03-02 02:36:50 Synexis

哦，我以爲reader.readAsText（文件）是導致.onload函數被調用的函數。看起來我錯了 – sdMarth

簡單，你應該在創建行

document.getElementById('file').onchange = function(){ 
 

 
     var file = this.files[0]; 
 
     console.log(file); 
 
     var reader = new FileReader(); 
 
     reader.onload = function(progressEvent){ 
 

 
     //get rid of the old file's data before adding the data of the new file 
 
     var new_tbody = document.createElement('tbody'); 
 
     var old_tbody = document.getElementById('TableID').getElementsByTagName('tbody')[0]; 
 
     old_tbody.parentNode.replaceChild(new_tbody, old_tbody); 
 

 
     // Process file line by line 
 
     var lines = this.result.split('\n'); 
 
     for(var line = 0; line < lines.length; line++){ 
 

 
      var col1 = 0; 
 
      var col2 = 0; 
 
      var col3 = 0; 
 

 
      var tokens = lines[line].match(/\S+/g); 
 

 
      if (tokens.length != 3) continue; 
 
      if (tokens != null){ 
 
       col1 = tokens[0]; 
 
       col2 = tokens[1]; 
 
       col3 = tokens[2]; 
 
      } 
 

 
      var tableRef = document.getElementById('TableID').getElementsByTagName('tbody')[0]; 
 
      var newRow = tableRef.insertRow(tableRef.rows.length); 
 
     var createClickHandler = function(row){ 
 
       return function() { 
 
        var cell = row.getElementsByTagName("td")[0]; 
 
        var id = cell.innerHTML; 
 
        alert("id:" + id); 
 
       }; 
 
     }; 
 
     newRow.onclick = createClickHandler(newRow); 
 
      
 
      
 
      
 
      var col1Cell = newRow.insertCell(0); 
 
      var col2Cell = newRow.insertCell(1); 
 
      var col3Cell = newRow.insertCell(2); 
 

 
      var col1CellText = document.createTextNode(col1); 
 
      var col2CellText = document.createTextNode(col2); 
 
      var col3CellText = document.createTextNode(col3); 
 

 
      col1Cell.appendChild(col1CellText); 
 
      col2Cell.appendChild(col2CellText); 
 
      col3Cell.appendChild(col3CellText); 
 
     } 
 
     }; 
 
     reader.readAsText(file); 
 
    };

<input type="file" name="file" id="file"> 
 

 
<table id="TableID" border=1> 
 
    <thead> 
 
    <tr> 
 
     <th>Col 1</th> 
 
     <th>Col 2</th> 
 
     <th>Col 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

來源

2017-03-02 03:00:22

需要幫助瞭解行創建方法之間的區別

回答

相關問題