Javascript - 检查按钮位于表格的哪一行和哪一列

Question

所以我有一个像这样的表:

<table id="myTable">
<tr>
<td> Hello world! </td>
<td> <input type="button" id="button" value="myButton" onclick="myFunction();"> </td>
</tr>
</table>

我想创建一个函数myFunction()，它将创建一个警报(当单击按钮时)，说明该按钮位于表格的哪一行和哪一列。

我怎样才能做到这一点？

Answer 1

最简单的方法是为每一行和每一列提供 id，并在函数中使用 event.target，您可以找出哪个元素触发了它。

恕我直言，您可以简单地编写一个通用函数并订阅表格上的点击事件，而不是在每一行上触发一个函数。

这会减少您的加价。

示例代码:-

<table id="myTable">
<tr id="Row1">
<td id="Column1"> Hello world! </td>
<td id="Column2"> <input type="button" id="button" value="myButton"> </td>
</tr>
</table>

<script type="text/javascript">
$("#myTable").click(function(event){
debugger;

    var column=event.target.parentNode.id;
    var row=event.target.parentNode.parentNode.id;

});
</script>




Without JQuery:-


<script type="text/javascript">

   var myCell=document.getElementById('button');
    myCell.onclick = function (event) {
       var column=event.target.parentNode.id;
    var row=event.target.parentNode.parentNode.id;
    alert(row);
    alert(column);
    };


</script>

参见 fiddle -http://jsfiddle.net/5tBfW/