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找出触发它的元素。

恕我直言，而不是在每一行上触发一个函数，你只需编写一个通用函数并订阅表上的click事件。

这会降低你的标记。

示例代码： -

<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>

请参阅小提琴 - http://jsfiddle.net/5tBfW/

Answer 2

要删除包含按钮的行，请使用此功能。

<强> HTML

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

<强>的Javascript

function myFunction(elm) {
    elm.parentNode.parentNode.parentNode.removeChild(elm.parentNode.parentNode);
}

Answer 3

您可以将该信息作为myFunction参数插入，例如：

<input type="button" id="button" value="myButton" onclick="myFunction(3,4);">

度过愉快的一天，

阿尔贝托

Answer 4

<table id="myTable">
<tr>
<td> Hello world! </td>
<td> <input type="button" id="button" value="myButton" onclick="myFunction(this);">             </td>
</tr>
</table>
<script>
function myFunction (elmt) {
    var tr = $(elmt).parents('tr');
    alert($(tr).index('tr'));
}
</script>

Javascript - 检查按钮所在表的哪一行和哪一列

4 个答案: