点击HTML表格并获取行号（使用Javascript，而不是jQuery） [英] Click on HTML table and get row number (with Javascript, not jQuery)

问题描述

我想知道如何点击HTML表格中的按钮并获取返回给我的行和列号：例如，使用下表：

 <表> 
< tr> 
< td>< input type =buttonvalue =button>< / td> 
< td>< input type =buttonvalue =button>< / td> 
< td>< input type =buttonvalue =button>< / td> 
< / tr> 
< tr> 
< td>< input type =buttonvalue =button>< / td> 
< td>< input type =buttonvalue =button>< / td> 
< td>< input type =buttonvalue =button>< / td> 
< / tr> 
< tr> 
< td>< input type =buttonvalue =button>< / td> 
< td>< input type =buttonvalue =button>< / td> 
< td>< input type =buttonvalue =button>< / td> 
< / tr> 
< / table> 
  

如何使用JavaScript来点击第二行的第一个按钮，并告诉我我点击了第二行的第一个单元格？每个按钮都需要有一个唯一的ID吗？

解决方案

试试这个：

  function getId（element）{alert（row+ element.parentNode.parentNode.rowIndex + -  column+ element.parentNode.cellIndex）;}  

< table> < TR> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < / TR> < TR> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < / TR> < TR> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < td>< input type =buttonvalue =buttononclick =getId（this）>< / td> < / table>

I would like to know how to click on a button in an HTML table and get the row and column number returned to me: For example, with the following table:

<table>
  <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
  </table>

How would I use JavaScript to click on the first button in the second row and have it tell me that I clicked on the first cell in the second row? Does each button need to have a unique id, or not?

解决方案

Try this:

function  getId(element) {
    alert("row" + element.parentNode.parentNode.rowIndex + 
    " - column" + element.parentNode.cellIndex);
}

<table>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
</table>

这篇关于点击HTML表格并获取行号（使用Javascript，而不是jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！