Show Hide HTML Table Row based on Button Click in jQuery

Last Reply one year ago By pandeyism

Posted one year ago

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

Posted one year ago Modified on one year ago

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