ansaurus

Question

Javascript rowIndex method is not working

Answer 1

+5 A:

the "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 );}

Murali VP 2009-12-01 06:15:47

I was writing an answer, but I like this one well enough so I won't bother. By way of further explanation, though, I will point out that the `this` keyword refers to the context in which it appears, not the context that the function was called from.

Nate C-K 2009-12-01 06:18:36

`parent` does not exist, it should be `parentNode`

Justin Johnson 2009-12-01 06:23:08

Sorry, cut-n-paste mistake, corrected.

Murali VP 2009-12-01 06:25:37

Answer 2

+2 A:

How about like this?

<td onclick="myMethod(this);">1.1</td>

...

function myMethod(obj){
    alert ( obj.parentNode.rowIndex  );   // parentNode is also used
}

S.Mark 2009-12-01 06:17:20

perfect! i am using this now

Rakesh Juyal 2009-12-01 06:42:47

Answer 3

A:

 <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 coming 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.com/TAGS/tag_td.asp

Beginner 2009-12-01 06:24:44

why it is downvoted? will it not work ?

Rakesh Juyal 2009-12-01 06:40:58

Answer 4

+2 A:

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>

Justin Johnson 2009-12-01 06:29:04

time to learn jQuery :)

Rakesh Juyal 2009-12-01 06:32:29

I also suggest learning the details of JavaScript in general, but at any rate, good luck.

Justin Johnson 2009-12-01 06:36:58

Agree that you should avoid event attributes, but there's no need to go straight to listeners or frameworks just for event binding. `td.onclick= function() { ... }` is fine for the common case where you only need one event handler.

bobince 2009-12-01 11:04:11

ansaurus

tags:

views:

answers:

Javascript rowIndex method is not working

related questions