需要帮助了解行创建方法之间的区别

我正在编写代码以从文件读取并将其内容写入表中，然后根据所点击的行进行操作。需要帮助了解行创建方法之间的区别

我创建了一个读取文件并创建行的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

需要帮助了解行创建方法之间的区别

回答

相关问题