Enable/disable Table based on checkbox selection

Question

Need To Add/Remove Class from TD of table, based on check-box selection. By Default all the TD will be hidden. While selecting check-box, i need to enable the respective column alone.

JSFiddle : http://jsfiddle.net/eVj8V/2/

Code:

<html>

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <style>
        .hideThis {display: none;}
        td, th {
                    border: thin solid;
            }
    </style>

    <script>

        function constrctTable() {
            var TableRef = document.getElementById("TableConstruction");
            TableRef.innerHTML = "";
            var table = "";
            table += "<table>";
            table += "<tr style='border: inherit;' id='tableColumns'>";
            table += "<td>S.No</td>";
            table += "<td>Name</td>";
            table += "<td class=hideThis>Employee No</td>";
            table += "<td class=hideThis>Manager No</td>";
            table += "<td class=hideThis>Clerk No</td>";


            table += "</tr>";
            for(i=0; i<5; i++) {
                table += "<tr class=recordRow>";
                table += "<td>"+i+"</td>";
                table += "<td>Raj "+i+"</td>";
                table += "<td class=hideThis name='Employee'>"+ i +"</td>";
                table += "<td class=hideThis name='Manager'>"+ i +"</td>";
                table += "<td class=hideThis name='Clerk'>"+ i +"</td>";
                    table += "</tr>";
            }
            table += "</table>";

            TableRef.innerHTML = table;
        }


        function enableEmployee(enableRef) {
            var compRef = document.getElementById('employee').checked;
            if(compRef){
                $('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
                $('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
            } else {
                $('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
                $('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis'); 
            }
        }


        function enableManager(enableRef) {
            var compRef = document.getElementById('manager').checked;
            if(compRef){
                $('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
                $('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
            } else {
                $('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
                $('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis'); 
            }
        }

        function enableClerk(enableRef) {
            var compRef = document.getElementById('clerk').checked;
            if(compRef){
                $('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
                $('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
            } else {
                $('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
                $('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis'); 
            }
        }

    </script>

</head>

<body onload="constrctTable();">

<div id="TableConstruction"> </div>

<input type='checkbox'  id='employee' onclick='enableEmployee("Employee")'>Employee</input>
<input type='checkbox'  id='manager' onclick='enableManager("Manager")'>Manager</input>
<input type='checkbox'  id='clerk'  onclick='enableClerk("Clerk")'>Clerk</input>

</body>


</html>

Thanks in advance.

Do you want them to be hidden on respective checkbox uncheck. — Milind Anantwar
– Milind Anantwar, Commented Mar 12, 2014 at 7:32
yes, by default it will be hidden... while check the check-box it will display its corresponding column... but while unchecking it is not hiding as expected @Milind Anantwar. — Hariharan
– Hariharan, Commented Mar 12, 2014 at 7:40

Milind Anantwar · Accepted Answer · 2014-03-12 07:59:02Z

2

I have modified your code to make it simple.Try this.

$(document).on('change','input[type="checkbox"]',function(){
var compRef = this.checked;
if(compRef){
  $("tr td:contains('"+$(this).attr('name')+"')").removeClass('hideThis');
  $("tr td[name='"+$(this).attr('name')+"']").removeClass('hideThis');
}else{
  $("tr td:contains('"+$(this).attr('name')+"')").addClass('hideThis') 
  $("tr td[name='"+$(this).attr('name')+"']").addClass('hideThis');
}});

Working Demo

answered Mar 12, 2014 at 7:59

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hariharan Over a year ago

change event is not firing in my browser. im using FF of version 27.0.1

Hariharan Over a year ago

How to achieve it using click event... If i place the if condition in click event function. it not responding as expected.

Hariharan Over a year ago

on else condition i used $('*[class=""]').addClass('hideThis'); but still it remove all the td

Milind Anantwar Over a year ago

You need to use .live instead of .on in that case

Collectives™ on Stack Overflow

Enable/disable Table based on checkbox selection

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related