Jitesh Byahut 2/20/2014 10425

How Get Table's Row And Column Value Using JQuery

Here we are finding table's rows columns values on clicking.

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Find table row column values on click in jquery</title>

    <script src="../../Script/jquery-1.9.1.js" type="text/javascript"></script>

    <script type="text/javascript">

      $(document).ready(function () {

        $('#tbl tbody tr').on('click', function () {

            var id = $(this).children("td:eq(0)").text();

            var name = $(this).children("td:eq(1)").text();

            var city = $(this).children("td:eq(2)").text();

            alert("ID: "+id+", Name: "+name+", City: "+city);

        });

      });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <table id="tbl" border="1">

          <tr><td>1</td><td>Amit</td><td>Dehri</td></tr>

          <tr><td>2</td><td>Mishra</td><td>Buxar</td></tr>

          <tr><td>3</td><td>Anand</td><td>Aurangabad</td></tr>

          <tr><td>4</td><td>Sharma</td><td>Kuju</td></tr>

          <tr><td>5</td><td>Ashutosh</td><td>Hagipur</td></tr>

    </table>

    </div>

    </form>

</body>

</html>

View output :

demoimage

If you click on table's any row of any column and want to find that value then use below codes.

<script type="text/javascript">

        $(document).ready(function () {

            $('#tbl tbody td').on('click', function () {

                alert($(this).text());

            });

        });

</script>

View output :

demoimage


Please give your feedback for improving this page