Question

我需要为用户提供隐藏/显示表列的功能。使用我自己调整的前面的示例我使用了复选框来隐藏/显示列，但现在需要删除表单元素。

我是jquery / javascript的新手，所以希望有人可以帮助解决现在的信息 1.加载时隐藏一些列（基于代码中的触发器）
2.切换列时交换图像，以便为用户提供关于显示/隐藏哪些列的可视反馈。

我有一个小提琴 http://jsfiddle.net/IllusionVK/DqQFP/14/，其中包含以下代码：

以前使用以下代码

$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});

$("input:checkbox").click(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
});

但必须删除表单元素（复选框），现在我尝试使用img标记代替复选框：

$('img').click(function(){
var column = $(this).attr('id');
$('td:nth-child('+ column +')').toggle();
});

我希望最终代码对所有人都有用，可以隐藏/显示列，而无需向实际表中添加任何代码，并动态使用nth-child。

非常感谢任何帮助!!干杯，查理。

到目前为止的帮助来源：
http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
使用nth-child，但是是硬编码的，只设计为一列显示/隐藏

hide table columns automatically by checking a checkbox with jQuery
但是要求桌子因额外课程负担过重=对我不好，使用复选框=也不好

Answer 1

如果您使用index()，则可以动态显示/隐藏列，前提是您的代码文本与表标题标记匹配。

$('span').click(function() {
    var t = $.trim($(this).text());
    var i = $(".headercell td:contains(" + t + ")").index() + 1;
    $('td:nth-child(' + i+ ')').toggle();
});

更新了jsfiddle。

旁注，img元素不能包含文本<img>text</img>，因此我调整了列表以使用span标记。

<强>更新如果您想轻松切换图例项目，可以执行以下操作..

<div class="legend">
    <div>Name</div>
    <div>Sex</div>
    <div>Age</div>
</div>

以下css：

.legend div.unchecked
{
    background-image:url(http://jquery.bassistance.de/validate/demo/images/unchecked.gif);
}
.legend div
{
    background-repeat:no-repeat;
    background-image:url(http://jquery.bassistance.de/validate/demo/images/checked.gif);
    cursor:pointer;
    background-position:left center;
    padding-left:20px;
}

你的jquery可以切换类来改变背景图像

$('div.legend div').click(function() {
    $(this).toggleClass("unchecked");
    var t = $.trim($(this).text());
    var i = $(".headercell td:contains(" + t + ")").index() + 1;
    $('td:nth-child(' + i + ')').toggle();
});

如果要在页面加载时隐藏列，只需将取消选中的类添加到要取消选中的图例div。

<div class="legend">
    <div>Name</div>
    <div>Sex</div>
    <div class="uncheckThis">Age</div>
</div>

然后运行此脚本将触发取消选中的脚本。

$('div.legend div.uncheckThis').click();

jsfiddle上的示例。

Answer 2

我猜测控件的类是可以的。因此，我将“复选框”包装在一个而不是你所拥有的... IE中不喜欢没有tbody，tr或td的表格。所以这就是我所做的（demo）：

HTML（只是更新的部分）

<div id="tableControl">
    <div class="checked">Name</div>
    <div class="checked">Sex</div>
    <div>Age</div>
</div>

CSS（更新部分）

#tableControl div  {
    cursor: pointer;
    background:url(http://jquery.bassistance.de/validate/demo/images/unchecked.gif) no-repeat;
    padding-left:  20px;
}
#tableControl div.checked {
    background:url(http://jquery.bassistance.de/validate/demo/images/checked.gif) no-repeat;
}

脚本

var hideColumn = function(el) {
    var $el = $(el),
        name = $.trim($el.text()),
        checked = !$el.is('.checked'),
        column = $('.headercell td:contains(' + name + ')').index() + 1;
    $('td:nth-child(' + column + ')').toggle(checked);
    $el.toggleClass('checked', checked);
};

$('#tableControl div')
    .each(function() {
        if (!$(this).is('.checked')) {
            // add class so the script can remove it (on startup)
            $(this).addClass('checked');
            hideColumn(this);
        }
    }).click(function() {
        hideColumn(this);
    });

jQuery使用image作为复选框来显示/隐藏表列

2 个答案: