獲取表電池元件的Javascript

Question

單擊假設我有一個表象下面這樣：使用PHP生成

表。根據報告類型，更新按鈕應該啓動兩個接口之一。我遇到的問題是讓每個更新按鈕僅與其特定行中的報告類型相對應。我已經用下面的代碼嘗試這樣做：

<table id="reportTbl" border="1" style="width:100%"> 
    <tr> 
    <th>Report</th> 
    <th>Data</th>  
    <th>Update</th> 
    </tr> 
    <tr> 
    <td>Encrypted</td> 
    <td>Image</td>  
    <td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td> 
    </tr> 
    <tr> 
    <td>Unencrypted</td> 
    <td>Document</td>  
    <td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td> 
    </tr> 
</table> 

    function runPop() { 
     var pop = new myPop(); 
     var cells = document.getElementById('reportTbl').getElementsByTagName('td'); 
     for (i = 0; i < cells.length;) { 
      var report = document.getElementById('reportTbl').getElementsByTagName('td')[i].innerHTML; 
      pop.popOut(report); 
      console.log(report); 
      i += 3; 
     } 
    } 

myPopout()代表通過檢查報告類型處理它這兩個接口的類。

上面的代碼的問題是，當我點擊按鈕時，兩個接口都打開一個在另一個之上，這必須是由於循環。我將如何解決這個問題？

Answer 1

您需要點擊的按鈕引用傳遞到runPop然後用它來獲取參考tr元素和使用，你可以，你可以得到的第一個TR

<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop(this);"></td> 

然後

function runPop(el) { 
    var report = el.parentNode.parentNode.cells[0].innerHTML; 
    var pop = new myPop(); 
    pop.popOut(report); 
    console.log(report); 
} 

Answer 2

你不應該把javascript放到你的HTML中，你應該使用代理事件：

HTML：

<table id="myTable"> 
    <tr> 
     <td>Cell #1 Row #1</td> 
     <td><input type="submit" class="tbl_Update" value="Update" /></td> 
    </tr> 
    <tr> 
     <td>Cell #1 Row #2</td> 
     <td><input type="submit" class="tbl_Update" value="Update" /></td> 
    </tr> 
</table> 

的JavaScript：

var myTable = document.getElementById('myTable'); 
myTable.addEventListener('click', function (e) { 
    var button = e.target; 
    var cell = button.parentNode; 
    var row = cell.parentNode; 
    var rowFirstCellText = row.querySelector('td').innerHTML; 
    console.log(button); 
    console.log(cell); 
    console.log(row); 
    console.log(rowFirstCellText); 
}, false); 

活生生的例子在這裏：http://jsfiddle.net/ueg19uv4/