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

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，但是是硬编码的，并且仅为一列显示/隐藏而设计

通过使用 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 元素不能包含文本 text，因此我调整了列表以使用 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

我猜想控件类应该没问题。所以我把“复选框”包裹在 a 中，而不是你把它放在... IE 不喜欢里面没有 tbody、tr 或 td 的表格。这就是我所做的（演示）：

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);
    });