JQuery использовать img в качестве флажка, чтобы показать / скрыть столбец таблицы

Question

Мне нужно предоставить пользователям возможность скрывать / показывать столбцы таблицы.Используя предыдущие примеры с моими собственными настройками, я использовал флажки, чтобы скрыть / показать столбцы, но теперь мне нужно удалить элементы формы.

Я очень новичок в jquery / javascript, так что надеюсь, что кто-то может помочь с информацией о том, как теперьна
1. Скрыть некоторые столбцы при загрузке (на основе триггера в коде)
2. Менять местами изображения при переключении столбцов, чтобы предоставить пользователям визуальную обратную связь относительно того, какие столбцы отображаются / скрываются.

Iиметь скрипку на 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
Использует n-го ребенка, НО жестко запрограммирован и предназначен только для одного столбца показать / скрыть

автоматически скрывать столбцы таблицы, устанавливая флажок с помощью jQuery
Но требует, чтобы таблица была перегружена дополнительными классами = плохо для меня, используйте флажки = также плохо

Answer 1

Я предполагал, что классы для элементов управления будут в порядке.Поэтому я обернул «флажки» вместо того, в котором они были у вас ... 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);
    });

Answer 2

Если вы используете 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 может переключать класс, чтобы изменить background-image

$('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 class="legend">
    <div>Name</div>
    <div>Sex</div>
    <div class="uncheckThis">Age</div>
</div>

Затем запуск этого скрипта вызовет, какие из них снять.

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

Пример для jsfiddle .