Question

我有以下小提琴 - 我正在测试一个获取表格中数据的概念。目前，当我点击单元格时，我可以达到特定单元格中显示的值。

此外，我希望能够获得所单击单元格的行和列索引。这里有人知道怎么做吗？

var tbl = document.getElementById("recordingTable");
if (tbl != null) {
    for (var i = 0; i < tbl.rows.length; i++) {
        for (var j = 0; j < tbl.rows[i].cells.length; j++)
        		
            tbl.rows[i].cells[j].onclick = function () { getval(this); };
    }
}
 
function getval(cel) {
    alert(cel.innerHTML);
    
}

<table cellspacing="1" id="recordingTable">

  <!-- this is the head element -->
  <thead class="callView">
    <!--specify the columns -->
    <tr>
      <th>STATE</th>
      <th>CALLID</th>
      <th>COLLECTED</th>
      <th>ZONE</th>
    </tr>
  </thead>
  
  <!-- -->
  <tbody class="callView">
    <tr>
      <td>0</td>
      <td>10001</td>
      <td>1</td>
      <td>0</td>
    </tr> 
    
    <tr>
      <td>1</td>
      <td>10002</td>
      <td>0</td>
      <td>1</td>
    </tr> 
    
    <tr>
      <td>0</td>
      <td>10003</td>
      <td>spring</td>
      <td>1</td>
    </tr> 
    
  </tbody>  
</table>

Answer 1

向每个单元格添加onclick事件的内容可以将其添加到表中，并从参数中获取必要的信息：

var tbl = document.getElementById("recordingTable");
tbl.onclick = function(e)
{
    console.log(e.target.innerHTML);
    console.log(e.target.cellIndex);
    console.log(e.target.parentElement.rowIndex);
}

JsFiddle：https://jsfiddle.net/19qfsxr9/14/

Answer 2

您可以使用

cel.rowIndex
cel.cellIndex

中的函数

如何获取单击表的行和列信息

2 个答案: