javascript - 使用 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() 表示处理两个接口(interface)的类，它通过检查报表类型来实现此目的。

上面代码的问题是，当我单击按钮时，两个界面都会打开，这一定是由于循环造成的。我该如何解决这个问题？

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);
}