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
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.
parents can't be more efficient than closest since the parents looks at all ascendants while closest stops at the first table it finds - which is all that is needed here.<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)" />
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>
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"));
});
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
