Find Selected table row in jQuery

Find Selected table row using jQuery

Hello everyone, I  am going to share the code sample for find selected table rows using jQuery. The detail about it as given below.


The JQUERY/JavaScript code-sample

$(function () {
    $('#userTable').on('click', 'tbody tr', function (event) {
        $(this).addClass('highlight').siblings().removeClass('highlight');
    });

    $('#btnRowClick').click(function (e) {
        var rows = getHighlightRow();
        if (rows != undefined) {
            alert(rows.attr('id'));
        }
    });

    var getHighlightRow = function () {
        return $('table > tbody > tr.highlight');
    }
});


The Live demo example(JavaScript + HTML) code-sample

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(function () {
            $('#userTable').on('click', 'tbody tr', function (event) {
                $(this).addClass('highlight').siblings().removeClass('highlight');
            });

            $('#btnRowClick').click(function (e) {
                var rows = getHighlightRow();
                if (rows != undefined) {
                    alert(rows.attr('id'));
                }
            });

            var getHighlightRow = function () {
                return $('table > tbody > tr.highlight');
            }
        });
    </script>
</head>
<body>
    <div>
        <h2>How to find selected row using jQuery?</h2>
    </div>
    <button id="btnRowClick" class="button">Get Selected Row Ids</button><br />
    <table id="userTable" class="row">
        <tbody>
            <tr style="background-color: #F0F8FF;">
                <th><b>Id</b></th>
                <th><b>Name</b></th>
                <th><b>Age</b></th>
            </tr>
            <tr id="row1">
                <td>1</td>
                <td>Anil</td>
                <td>30</td>
            </tr>
            <tr id="row2">
                <td>2</td>
                <td>Sunil</td>
                <td>27</td>
            </tr>
            <tr id="row3">
                <td>3</td>
                <td>Sushil</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
</body>
</html>




ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^