Get HTML Table RowIndex on Button Click using JavaScript and jQuery

Last Reply 2 months ago By dharmendr

Posted 2 months ago

how can i get row index of html table on button click 

<td><input type="button" id="imgbtnedit1" value="" class="imgbtnedit"onclick="EditRecordForEditDemo(this)" /></td>

 

Posted 2 months ago

Hi SajidHussa,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table RowIndex</title>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function EditRecordForEditDemo(element) {
            var rowJavascript = element.parentNode.parentNode;
            var rowjQuery = $(element).closest("tr");
            alert("JavaScript Row Index : " + (rowJavascript.rowIndex - 1) + "\njQuery Row Index : " + (rowjQuery[0].rowIndex - 1));
        }
    </script>
</head>
<body>
    <table border="1" cellpadding="1" cellspacing="1">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Country</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
            <td><input type="button"  value="Show" class="imgbtnedit" onclick="EditRecordForEditDemo(this)" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
            <td><input type="button" value="Show" class="imgbtnedit" onclick="EditRecordForEditDemo(this)" /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suzanne Mathews</td>
            <td>France</td>
            <td><input type="button" value="Show" class="imgbtnedit" onclick="EditRecordForEditDemo(this)" /></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Robert Schidner</td>
            <td>Russia</td>
            <td><input type="button" value="Show" class="imgbtnedit" onclick="EditRecordForEditDemo(this)" /></td>
        </tr>
    </table>
</body>
</html>

Demo