使用Javascript从单击按钮获取表格单元格元素

Question

假设我有一个如下表：

该表是使用PHP生成的。更新按钮应根据报告类型启动两个接口之一。我遇到的问题是每个Update按钮只对应于其特定行中的Report类型。我用以下代码尝试了这个：

<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

你不应该在你的HTML中放置javascript，你应该使用委托事件：

HTML：

sortYear

JavaScript的：

ng-init="sortYear = getCurYear()"

此处的实例：http://jsfiddle.net/ueg19uv4/