如何将参数传递给javascript函数

Question

I have the following javascript.

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

</script>

following is html,

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

I need to pass table id "tbl1" to javascript method getMethod on click event of html button. so what should I do? what I want is something like this,(Passing table ID onclick method's parameters)

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

how can I do this?

Thanks

Answer 1

Don't pass anything rather than the this reference and do,

HTML

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

JS

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

In the above function we have used .closest() to grab the parent table. and we have used .attr('id') to retrieve its id.

DEMO

Answer 2

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

Update, since your comment made it clear this needs to be more 'dynamic'

Here is a vanilla javascript implementation:

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

Called using :

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

Demo: http://jsfiddle.net/robschmuecker/MxWR7/1/

Answer 3

Pass only this :

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

In your functuon write this:

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

Answer 4

Since you tagged the question with jquery, You dont have to write inline code for click handler

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

jquery code will be

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

Answer 5

As a general rule, it is much better to add event listeners through javascript than inline. So assuming you use jQuery on the page:

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

Then in your html for the button:

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

And you're done! If you need some programmatic way to identify the parent of your element, look at [$.parents()]. 1