Mam tabelę HTML z kilkoma kolumnami i muszę zaimplementować selektor kolumn przy użyciu jquery. Kiedy użytkownik kliknie pole wyboru, chcę ukryć / pokazać odpowiednią kolumnę w tabeli. Chciałbym to zrobić bez dołączania klasy do każdego td w tabeli. Czy istnieje sposób, aby wybrać całą kolumnę za pomocą jquery? Poniżej znajduje się przykład kodu HTML.
<table>
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>
<form>
<input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
<input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
<input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
Odpowiedzi:
Osobiście wybrałbym podejście klasy na każdym td / th / col. Następnie możesz włączać i wyłączać kolumny za pomocą pojedynczego zapisu do className w kontenerze, zakładając reguły stylu, takie jak:
To będzie szybsze niż jakakolwiek pętla JS; w przypadku naprawdę długich tabel może mieć znaczący wpływ na szybkość reakcji.
Jeśli możesz uniknąć obsługi IE6, możesz użyć selektorów przylegania, aby uniknąć konieczności dodawania atrybutów klasy do tds. Lub alternatywnie, jeśli Twoim problemem jest wyczyszczenie znaczników, możesz dodać je automatycznie z JavaScript w kroku inicjalizacji.
źródło
.hidden {display:none;}
i używane.addClass('hidden')
i.removeClass('hidden')
co było trochę szybciej niż.hide()
a.show()
.Jedna linia kodu używająca jQuery, która ukrywa drugą kolumnę:
Jeśli twoja tabela ma nagłówek (th), użyj tego:
Źródło: Ukryj kolumnę tabeli za pomocą jednego wiersza kodu jQuery
jsFiddle, aby przetestować kod: http://jsfiddle.net/mgMem/1/
Jeśli chcesz zobaczyć dobry przypadek użycia, spójrz na mój post na blogu:
Ukryj kolumnę tabeli i pokoloruj wiersze na podstawie wartości za pomocą jQuery .
źródło
możesz użyć grup grup:
Twój skrypt mógłby wtedy zmienić tylko
<col>
klasę pożądania .źródło
$('table > colgroup > col.yourClassHere')
selektora jQuery, nadal możesz ustawić coś, na przykład kolor tła całej kolumny, ale nie możesz już przełączać widoczności kolumny. Testowane przeglądarki to MSIE 11 , Safari 5 , Chromium 44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 . „Większość atrybutów HTML 4.01 nie jest obsługiwana w HTML5” - zobacz tutaj .Powinni to zrobić:
Jest to kod nieprzetestowany, ale zasada jest taka, że w każdym wierszu wybiera się komórkę tabeli, która odpowiada wybranemu indeksowi wyodrębnionemu z nazwy pola wyboru. Możesz oczywiście ograniczyć selektory za pomocą klasy lub identyfikatora.
źródło
Oto trochę bardziej funkcjonalna odpowiedź, która zapewnia interakcje użytkownika na podstawie poszczególnych kolumn. Jeśli ma to być dynamiczne doświadczenie, w każdej kolumnie musi znajdować się przełącznik, który można kliknąć, wskazujący możliwość ukrycia kolumny, a następnie sposób przywrócenia wcześniej ukrytych kolumn.
W JavaScript wyglądałoby to mniej więcej tak:
Aby to wesprzeć, dodamy trochę znaczników do tabeli. W nagłówku każdej kolumny możemy dodać coś takiego, aby zapewnić wizualny wskaźnik elementu, który można kliknąć
Umożliwimy użytkownikowi przywrócenie kolumn za pomocą linku w stopce tabeli. Jeśli domyślnie nie jest trwały, to dynamiczne włączenie go w nagłówku może przepychać się wokół stołu, ale naprawdę możesz go umieścić w dowolnym miejscu:
To podstawowa funkcjonalność. Poniżej znajduje się demo z kilkoma dodatkowymi elementami. Możesz także dodać podpowiedź do przycisku, aby pomóc wyjaśnić jego przeznaczenie, nieco bardziej organicznie nadać przyciskowi styl nagłówka tabeli i zwinąć szerokość kolumny, aby dodać kilka (nieco dziwacznych) animacji CSS, aby przejście było trochę mniejsze nerwowy.
Działające demo w jsFiddle & Stack Snippets:
Pokaż fragment kodu
źródło
$(document).ready
ale nie mam szczęścia.hide-col
do usuwania kolumn, ale może być również użyte do wskazania stanu, więc możesz albo - dodać.hide-col
do każdegotd
&tr
podczas renderowania HTML i gotowe. Lub jeśli chcesz dodać go w mniejszej liczbie miejsc, umieść go w nagłówku (ten stan będzie musiał gdzieś iść) i przy inicjalizacji użyj tego, aby ukryć indeks kolumny wśród elementów potomnych. Obecnie kod po prostu nasłuchuje pozycji po kliknięciu, ale można go zmodyfikować, aby również szukał pozycji klasy. Również szczęśliwy dzień indykaclass='hide-col'
dowolnym miejscu w swoim html (prawdopodobnie wthead > tr > th
najbardziej sensownym miejscu i podniesie się, aby upewnić się, że ukrywa wszystkie komórki w tej kolumnie i dynamicznie wyświetla również stopkę przywracaniaI oczywiście tylko CSS dla przeglądarek obsługujących
nth-child
:table td:nth-child(2) { display: none; }
Dotyczy to przeglądarki IE9 i nowszych.
W swoim przypadku potrzebowałbyś kilku klas, aby ukryć kolumny:
ect ...
źródło
Poniższy fragment opiera się na kodzie Erana, z kilkoma drobnymi zmianami. Przetestowałem to i wydaje się, że działa dobrze w przeglądarce Firefox 3, IE7.
źródło
źródło
Bez klasy? Możesz wtedy użyć tagu:
I pokazać im użycie:
źródło