Arjun Arjun - 3 years ago 97
jQuery Question

To add/remove table columns with drop down check-boxes (check list) using jquery

I want to edit a table - Add/Remove its columns with drop-down check boxes. Can anyone tell me how? I could do it with ordinary checkbox, but could not find out how by drop-down checkbox. This is my code:

FIDDLE

<script>
$("button").click(function() {
$("p").toggle();
var btnID = $(this).attr('id');

var coresDiv = $('div#' + btnID);

coresDiv.toggle();
});

$("#selector").click(function() {
$("#main").toggle();
$("p").toggle();
});
</script>


When check box is ticked, corresponding column is to be displayed. When unchecked column is to be removed.

Can you give me full HTML code? When I put the fiddle to notepad and saved as HTML it does not work. Some full code would be really helpful.

Answer Source

Try this:

$("input[type='checkbox']").change(function() {
    var val = $(this).val();    
    $("#mytable tr:first").find("th:eq("+val+")").toggle();
    $("#mytable tr").each(function(){
        $(this).find("td:eq("+val+")").toggle();
    });
    if($("#mytable tr:first").find("th:visible").length > 0){
        $("#mytable").removeClass("noborder");
    }
    else{
        $("#mytable").addClass("noborder");
    }
});

Fiddle here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download