使用 jquery 添加/删除带有下拉复选框（检查列表）的表列答案

【问题标题】：To add/remove table columns with drop down check-boxes (check list) using jquery使用 jquery 添加/删除带有下拉复选框（检查列表）的表列
【发布时间】：2017-07-24 23:48:24
【问题描述】：

我想编辑一个表格 - 使用下拉复选框添加/删除其列。谁能告诉我怎么做？我可以用普通的复选框来做到这一点，但无法通过下拉复选框找到方法。这是我的代码：

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>

勾选复选框时，将显示相应的列。当要删除未选中的列时。

你能给我完整的 HTML 代码吗？当我把小提琴放到记事本上并保存为 HTML 时，它不起作用。一些完整的代码会很有帮助。

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

试试这个：

$("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.

【讨论】：

一个新问题。将代码复制粘贴到记事本并另存为 .html，不显示下拉列表。可能是什么问题？

【解决方案2】：

您可以将data-* 属性添加到复选框，指示哪个列依赖于下面给出的列

<input type="checkbox" name="vehicle" value="Bike" data-column="1" />Index

然后

$('input[type="checkbox"]').click(function () {
    $('#mytable tr > :nth-child(' + $(this).data('column') + ')').toggle(!this.checked)
});

演示：Fiddle

【讨论】：

这个想法是正确的。但相反的情况正在发生。添加未选中列时。删除检查列时。我想要反过来。当 unchecked-column 被删除时。谢谢