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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.