Javascript可以同时获取行索引和单元格数据吗？

Question

我的表可以通过 .rowIndex 获取行索引。如果我想要行的第三列数据，是否有可能。

我的表：

<table width="90%" border="1" id="TestAlert">
<tbody>
    <tr><td>Attribute</td> <td>Thai</td> <td>English</td></tr>
    <tr onclick="myFunction((this))"><td>???????</td><td>...</td><td>WT</td></tr>
    <tr onclick="myFunction((this))"><td>????????</td><td>...</td><td>MDL</td></tr>        
    <tr onclick="myFunction((this))"><td>???</td><td>...</td><td>HIGH</td></tr></tbody>
    </table>

和我的脚本：

function myFunction(x) {
if(x.rowIndex != 0){
console.log("Row index is: " + x.rowIndex + "Data 3rd cell: " + **CellData**); //get index
}

当我单击每一行时，我应该使用什么函数来获取 'WT' 或 'MDL' 或 'HIGH'？

Answer 1

不需要onclick向每个tr.Rather添加事件处理程序，在 js 中附加onclick到tbody.

在click得到事件对象和从那里得到的目标。目标将是td。innerHTML将给TD的内容和parentNode将返回tr的td从生成的事件在哪里。

使用rowIndex获得该行的索引。rowIndex从 0 开始

var table = document.getElementById('TestAlert')
var getTBody = table.getElementsByTagName("tbody")[0];
getTBody.onclick = function(e) {
  console.log(e.target.parentNode.rowIndex)
  console.log(e.target.innerHTML)
};

<table width="90%" border="1" id="TestAlert">
  <tbody>
    <tr>
      <td>Attribute</td>
      <td>Thai</td>
      <td>English</td>
    </tr>
    <tr>
      <td>???????</td>
      <td>...</td>
      <td>WT</td>
    </tr>
    <tr>
      <td>????????</td>
      <td>...</td>
      <td>MDL</td>
    </tr>
    <tr>
      <td>???</td>
      <td>...</td>
      <td>HIGH</td>
    </tr>
  </tbody>
</table>