Get HTML Table Row and RowIndex when Clicked in jQuery

Last Reply 10 months ago By dharmendr

Posted 10 months ago

how can we get row and orw id on row click of html table 

When i click on html table row then i want to fetch all the record of that row and also row number

 

 

Posted 10 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></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#tblCustomers td').on('click', function () {
                var row = $(this).closest('tr');
                var id = $(row).find('td').eq(0).html();
                var name = $(row).find('td').eq(1).html();
                var country = $(row).find('td').eq(2).html();
                alert('Id : ' + id + '\nName : ' + name + '\nCountry : ' + country + '\nRow Number : ' + $(row).index());
            });
        });
    </script>
</head>
<body>
    <table id="tblCustomers" style="border: 1px solid #ccc;">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suzanne Mathews</td>
            <td>France</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Robert Schidner</td>
            <td>Russia</td>
        </tr>
    </table>
</body>
</html>

Demo