Search code examples
htmljscript

Toggle table row based on class name in HTML


Hi I am having a piece of code. Here I am toggling my table based on the class name which I have hardcoded over here. I want to pass my class name as a variable in order to toggle it.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(){
    $(".b:not(:first)").toggle();
}
</script>
</head>
<body>


<table>
<tr  class="b" onclick=alok()><td>qw</td></tr>
<tr  class="b"><td>alok</td></tr>
<tr  class="b"><td>verma</td></tr>
<tr  class="c" onclick=alok()><td>qw</td></tr>
<tr  class="c"><td>alok</td></tr>
<tr  class="c"><td>verma</td></tr>

</table>

</body>
</html>

Solution

  • Thanks guys for looking into it... anyways I solved it.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    function alok(obj){
    var s= $(obj).attr('class');
    
        $("."+s+":not(:first)").toggle();
    }
    </script>
    </head>
    <body>
    
    
    <table>
    <tr  class="b" onclick=alok(this)><td>qw</td></tr>
    <tr  class="b"><td>alok</td></tr>
    <tr  class="b"><td>verma</td></tr>
    <tr  class="c" onclick=alok(this)><td>qw</td></tr>
    <tr  class="c"><td>alok</td></tr>
    <tr  class="c"><td>verma</td></tr>
    
    </table>
    
    </body>
    </html>