Question

我有以下javascript。

<script>
function getMethod(id){alert(id);}

</script>

以下是html，

<table id="tbl1">
<tr>
<td><input type="button" onclick="getMethod()"/></td>
</tr>
</table>

我需要在html按钮的click事件上将表id“tbl1”传递给javascript方法getMethod。所以我该怎么做？我想要的是这样的，（传递表ID onclick方法的参数）

<input type="button" onclick="getMethod('$("tbl1").ID')"/>

我该怎么做？

由于

Answer 1

不要传递任何内容而不是this引用并执行，

HTML

<input type="button" onclick="getMethod(this)"/>

JS

function getMethod(elem){
   alert($(elem).closest('table').attr('id'));
}

在上面的函数中，我们使用.closest()来获取父表。我们使用.attr('id')来检索其ID。

DEMO

Answer 2

<input type="button" onclick="getMethod('tbl1')"/>

更新，因为您的评论明确指出这需要更具动态性

这是一个vanilla javascript实现：

function getMethod(element) {
        // element -> td -> tr -> tbody ->table
        parentTable = element.parentNode.parentNode.parentNode.parentNode;
        alert(parentTable.id);
    }

使用：

调用

<input type="button" onclick="getMethod(this)" />

演示：http://jsfiddle.net/robschmuecker/MxWR7/1/

Answer 3

仅通过此：

<input type="button" onclick="getMethod(this)"/>

在你的函数中写下：

<script>
    function getMethod(idget) {
        alert($(idget).closest("table").attr("id"));
    }
</script>

Answer 4

由于您使用jquery标记了问题，因此您无需为单击处理程序编写内联代码

<table id="tbl1">
    <tr>
        <td>
            <input type="button" />
        </td>
    </tr>
</table>

jquery代码将是

$("#tbl1 button").click(function () {
    alert($(this).closest("table").attr("id"));
});

Answer 5

作为一般规则，通过javascript添加事件侦听器要比内联更好。所以假设你在页面上使用jQuery：

$(document).ready(function() {
    //'#myButton' should be some jQuery identifier for your button
    $('#myButton').click(function(e) {
        getMethod('tbl1');
    });
});

然后在你的html按钮中：

<input type="button" id="myButton">

你已经完成了！如果您需要某种编程方式来识别元素的父元素，请查看[$ .parents（）]。1

如何将参数传递给javascript函数

5 个答案:

DEMO