Get HTML Table Row and RowIndex when Clicked in jQuery

Last Reply 2 months ago By dharmendr

Posted 2 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 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></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