Javascript rowIndex method is not working

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>

Answers


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

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 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


Try this way

$('#datatable').on("click", ".add18", function () {
    var row = $(this).closest('tr');
    var rowIndex = $(this).closest('tr').index();
    alert(rowIndex);
});

Need Your Help

VisualSVN and VS2008 integration - moving files

.net visual-studio svn visualsvn

If I drag and drop tracked .cs files to new folders in VS2008 with VisualSVN what message should I see when I commit the .cs file? I see added (+) shouldn't I see a "move"?

How do I set up my environment for ESC/Java2 in Windows and build/run with ESC/Java2?

java jml

How do I set up my execution environment for ESC/Java2 in WindowsXP? And furthermore, how do I build and run, in WindowsXP, projects with ESC/Java2. It is hard to tell from their specifications/rea...