Question

我正在编写代码以从文件中读取并将其内容写入表中，然后根据单击的行执行操作。

我创建了一个读取文件并创建行的jsfiddle，但我很难理解如何选择正确的行。

我试图只选择具有特定id的表的行（不包括标题中的行）。

我试过这样做：

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

但结果变量＆＃39; tbod＆＃39;似乎没有内部HTML，所以变量＆＃39;行＆＃39;只是空的。谁能解释为什么似乎没有被选中？

这是一个示例输入文件：

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

Answer 1

你正在正确地选择一切，但是太快了......

在你的jsfiddle例子中，你有以下内容（相关部分的修剪代码）：

braintreeCredentials.validCountryLiveTokenError

所以，你需要做的就是从你的onload处理程序调用{{1}} ：

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

Answer 2

很简单，您应该在创建行

时添加onclick事件

   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>

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

2 个答案: