Jquery .Toggle(), основанный на идентификаторе группы colgroup.

Скрипка здесь.

У меня возникли проблемы с захватом фактического столбца по столбцу colgroup для его переключения. У меня правильно сопоставлен индекс, но я не понимаю, как я могу использовать силу colgroup, чтобы получить весь столбец. Вот моя текущая попытка (полностью внизу на скрипке):

    //Column Button Hider
    $('fieldset.techtable input.column[type=checkbox]').on('change', function() {
        var index = $(this).prevAll('input.column').length+2;
        console.log(index);
        $('fieldset.techtable' #col'+index').toggle()
            //($('#col'+index).toggle());
    });

а вот таблица и группа:

<section class="techtable">
        <h1>Technologies / Compliance / Certifications</h1>
        <table cellspacing="0">
            <colgroup>
                <col id="col0">
                <col id="col1">
                <col id="col2">
                <col id="col3">
                <col id="col4">
                <col id="col5">
                <col id="col6">
            </colgroup>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Skill</th>
                    <th>Version(s)</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Elapsed Time</th>
                    <th>Expertise Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Technology</td>
                    <td>J2EE</td>
                    <td>1.5, 1.6, 1.7</td>
                    <td>November, 2011</td>
                    <td></td>
                    <td></td>
                    <td>2</td>
                </tr>
                </tr>...repeating...</tr>
            </tbody>
        </table>
    </section>

Я хочу попытаться использовать силу colgroup, но не уверен, стоит ли мне использовать идентификаторы классов (если да, то где? В идентификаторе группы col, <th>? или каждый <td>?).

Являются ли <th>с мешает <colgroup>? может быть, лучше сформулировать, стоит ли ссылаться на th вместо того, чтобы пытаться использовать colgroup?

Точка в правильном направлении синтаксиса полезна, и строка кода для помощи всегда ценится, но для этого я стараюсь не расширять это в большее количество строк кода, если я не пропускаю методологию. Я предполагаю, что я не просто правильно собираю информацию, но ваши отзывы могут доказать, что я не прав.

Источник

4 ответа

Решение

Если вы пытаетесь скрыть определенный столбец данных, скрыть столбец внутри группы не удастся.

var colIndex = 0; // first column
$(myTable).find("td,th").filter(":nth-child(" + (colIndex+1) + ")").toggle();

Я изменил этот код для работы с вашей таблицей. Вот обновленная скрипка

 var index = $(this).prevAll('input.column').length+2;
 $('colgroup').parent('table').find("td,th").filter(":nth-child(" + (index+1) + ")").toggle();
Источник

Вы пытаетесь это сделать?

$('fieldset.techtable #col' + index).toggle();

Поскольку идентификатор уникален на странице, обычно достаточно просто указать следующее:

$('#col' + index).toggle();
Источник

Попробуйте следующее:

$ (". techtable td: nth-child (" + index + 1 + ")"). toggle ();

видел это на: Скрыть / Показать столбец в таблице HTML

Источник

Я не думаю, что вы сможете переключать видимость столбца, потому что столбцы больше метаданных / псевдоэлементов, чем фактические элементы на странице (это на самом деле N-й tr каждого td Вы пытаетесь переключиться) . Я знаю, что есть проблемы при попытке последовательно их стилизовать по этой самой причине (см. Мой ответ здесь для объяснения / расследования) .

Источник
Другие вопросы по тегам