Show Hide HTML Table Row based on Button Click in jQuery

kavithav

SOLVED CLOSED ACTIVE ANSWERED
User: kavithav
Posted: on Jan 18, 2019 03:19 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 28560
Sample Code: Download

Below is my css to enable or disable the buttons on button click by default Btn1 and Btn2 will be in disable mode using the style buttonInactive and on clicking the button it turns to blue color using buttonActive class which is handled through jquery

.buttonActive {
    background-color: #1E78AB;
    border: 1px solid #1E78AB;
    color: #fff;

}
.buttonInactive {
    background-color:#fff;
    border: 1px solid #1E78AB;
    color: #1E78AB;

}

<button id="btn1" type="button" class="buttonInactive">Btn1</button>
<button id="btn2" type="button" class="buttonInactive">Btn2</button>

$("#btn1").click(function () {
     $(this).toggleClass("buttonActive");
});
$("#btn2").click(function () {
     $(this).toggleClass("buttonActive");
});

I need to hide tr the below tr elements on button click when button is active i need to show tr elements and when button is inactive i need to hide tr elements

<tr id="tr1">
    <td><input type="text" name="val1" id="val1"/></td>
    <td><input type="text" name="val2" id="val2"/></td>
</tr>
<tr id="tr2">
    <td><input type="text" name="val3" id="val3"/></td>
    <td><input type="text" name="val4" id="val4"/></td>
</tr>

my requirement is first after page loads all the three buttons should be disabled when all the buttons are disabled all the <tr>related to those three should also be disabled

if i click btn1 tr1 should be displayed

if i click btn2 tr2 should be displayed

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 4

Reply
ANSWER
User: pandeyism
Replied: on Jan 18, 2019 04:23 AM
Modified: on Jan 18, 2019 06:19 AM
Report

Hey kavithav,

Please refer below sample.

HTML

<style type="text/css">
    .buttonActive
    {
        background-color: #1E78AB;
        border: 1px solid #1E78AB;
        color: #fff;
    }
    .buttonInactive
    {
        background-color: #fff;
        border: 1px solid #1E78AB;
        color: #1E78AB;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#tr1").hide();
        $("#tr2").hide();
        $("#btn1").click(function () {
            $('.buttonInactive').not(this).removeClass('buttonInactive');
            $(this).toggleClass('buttonActive');
            if ($(this).hasClass("buttonActive")) {
                $("#tr1").show();
            }
            else {
                $("#tr1").hide();
            }
        });
        $("#btn2").click(function () {
            $('.buttonInactive').not(this).removeClass('buttonInactive');
            $(this).toggleClass('buttonActive');
            if ($(this).hasClass("buttonActive")) {
                $("#tr2").show();
            }
            else {
                $("#tr2").hide();
            }
        });
    });
</script>
<button id="btn1" type="button" class="buttonInactive">
    Btn1</button>
<button id="btn2" type="button" class="buttonInactive">
    Btn2</button>
<table id="mytable">
    <tr id="tr1">
        <td>
            <input type="text" name="val1" id="val1" />
        </td>
        <td>
            <input type="text" name="val2" id="val2" />
        </td>
    </tr>
    <tr id="tr2">
        <td>
            <input type="text" name="val3" id="val3" />
        </td>
        <td>
            <input type="text" name="val4" id="val4" />
        </td>
    </tr>
</table>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Show Hide HTML Table Row based on Button Click in jQuery

Company

Explore

Follow us

Contact Us