python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions