I am using the rowIndex property of TR but it is not working. Please let me know if i am doing something wrong here.
function myMethod(){
alert ( this.parent.rowIndex ); // parentNode is also used
}
Html
<table border="1">
<tr>
<td onclick="myMethod();">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td onclick="myMethod();">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td onclick="myMethod();">3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<td onclick="myMethod();">4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</table>
I am using the rowIndex property of TR but it is not working. Please let me know if i am doing something wrong here.
function myMethod(){
alert ( this.parent.rowIndex ); // parentNode is also used
}
Html
<table border="1">
<tr>
<td onclick="myMethod();">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td onclick="myMethod();">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td onclick="myMethod();">3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<td onclick="myMethod();">4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</table>
5 Answers
Reset to default 8the "this" in this.parent.rowIndex is the window. Not the td element. Try
<td onclick="myMethod(this);">1.1</td>
function myMethod(obj){ alert ( obj.parentNode.rowIndex );}
How about like this?
<td onclick="myMethod(this);">1.1</td>
...
function myMethod(obj){
alert ( obj.parentNode.rowIndex ); // parentNode is also used
}
Others have beaten me to why your code isn't working (concerning the value of this and the parentNode attribute), but I would still like to point out that event attachment via HTML attributes is antiquated and wrong.
You should use one of the prevalent JavaScript libraries like jQuery, Dojo, YUI, Prototype, ExtJs, or Mootools to attach the event in a to ensure that your your page structure is decoupled from the event logic. Here's a simple example using jQuery:
JavaScript
$(function() {
$(".row").click(function() {
alert( $(this).parent().attr("rowIndex") );
});
});
HTML
<table>
<tr>
<td class="row">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td class="row">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td class="row">3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<td class="row">4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</table>
<html>
<head></head>
<body>
<script>
function myMethod(e){
alert('am in');
alert(e.parent);
alert ( e.innerHTML); // parentNode is also used
}
</script>
<table border="1">
<tr>
<td onclick="myMethod(this);">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td onclick="myMethod();">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td onclick="myMethod();">3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr>
<td onclick="myMethod();">4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</table>
</body>
</html>
the value of e which is basically the TD object does not have property as parent and thus it is ing as undefined.
I think you need to search for tr via getElementById and give some unqiue ID to TD so that td can provide its corresponding tr id and then you can get that TR.
http://www.w3schools./TAGS/tag_td.asp
Try this way
$('#datatable').on("click", ".add18", function () {
var row = $(this).closest('tr');
var rowIndex = $(this).closest('tr').index();
alert(rowIndex);
});