Ukryj / pokaż kolumnę w tabeli HTML

146

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>
Brian Fisher
źródło
2
Mam nadzieję, że poniższa strona pomogłaby: fiendish.demon.co.uk/html/javascript/hidetablecols.html
Wdrożyłem to rozwiązanie za pomocą jQuery i działało idealnie dla mnie: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
Aaron
1
Zgodnie z komentarzem użytkownika344059, oto archiwum internetowe dla zepsutego linku http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

Odpowiedzi:

84

Chciałbym to zrobić bez dołączania klasy do każdego td

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:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

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.

bobince
źródło
7
Dzięki za radę chciałem zachować czystość HTML, ale wydajność zdecydowanie stała się problemem, gdy rozmiar tabeli zbliżył się do 100 wierszy. To rozwiązanie zapewniło 2-5-krotną poprawę wydajności.
Brian Fisher
2
To podejście zdziałało dla mnie cuda, jeśli chodzi o wydajność. Dzięki!
axelarge
4
Dodałem to do mojego css .hidden {display:none;}i używane .addClass('hidden')i .removeClass('hidden')co było trochę szybciej niż .hide()a .show().
styfle
247

Jedna linia kodu używająca jQuery, która ukrywa drugą kolumnę:

$('td:nth-child(2)').hide();

Jeśli twoja tabela ma nagłówek (th), użyj tego:

$('td:nth-child(2),th:nth-child(2)').hide();

Ź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 .

Leniel Maccaferri
źródło
1
Na marginesie, ponieważ nie ma ich w przykładzie, czy nie ma problemu, że ignoruje to colspans? Dobrze, jeśli ich nie używasz. Jest jeszcze jedno pytanie związane: stackoverflow.com/questions/1166452/ ...
Kim R
2
Musiałem dodać tbody do selektora, aby uniknąć ukrywania stopki za pomocą pagera: $ ('. Webgrid tbody td: nth-child (1), .webgrid th: nth-child (1)'). Hide ();
Alex
@KimR To może pomóc w przypadku problemów z colspan stackoverflow.com/questions/9623601/…
yunzen
Nie wiem dokładnie dlaczego, ale zamiast tego musiałem użyć „n-tego typu”, aby zadziałało. Na przykład: $ ('table td: nth-of-type (2)'). Hide ();
Leopoldo Sanczyk
@LeopoldoSanczyk Czy korzystałeś z Safari? Wygląda na to, że wymaga n-tego typu
ykay mówi Przywróć Monikę
12

możesz użyć grup grup:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <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>

Twój skrypt mógłby wtedy zmienić tylko <col>klasę pożądania .

Luis Melgratti
źródło
Wydaje mi się, że grupa współpracowników nie obsługuje różnych przeglądarek, czy to już nieprawda?
Brian Fisher,
Może. Używam tej metody dla kolumn hilight (firefox, safari, chrome działa dobrze), nigdy nie próbowałem jej w IE.
Luis Melgratti
@Brian - IE8 nie działa, a IE8 z włączoną przeglądarką IE7 wydaje się działać.
Nordes
4
Wydaje się, że to już nie działa w nowoczesnej przeglądarce (Chrome i Firefox)
JBE
@JBE: mówiąc precyzyjnie, tak do pewnego stopnia w nowoczesnych przeglądarkach . Używając $('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 .
Bass
11

Powinni to zrobić:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

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.

Eran Galperin
źródło
11

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:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

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ąć

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

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:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

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.

Demo Screengrab

Działające demo w jsFiddle & Stack Snippets:

KyleMit
źródło
ukrywasz najbliższą 1 kolumnę, jak ukryć najbliższą 3 kolumnę?
Nirmal Goswami
sprawdź moją tabelę - i.stack.imgur.com/AA8iZ.png i pytanie zawierające tabelę html - stackoverflow.com/questions/50838119/ ... przycisk pojawi się po A, B i C
Nirmal Goswami
przepraszam, że przywracam tak starą odpowiedź, ale czy istnieje łatwy sposób na domyślne ustawienie ukrytych niektórych kolumn? Próbuję to zrobić, $(document).readyale nie mam szczęścia
RobotJohnny
1
@RobotJohnny, dobre pytanie. To jest użycie klasy .hide-coldo usuwania kolumn, ale może być również użyte do wskazania stanu, więc możesz albo - dodać .hide-coldo każdego td& trpodczas 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ń indyka
KyleMit
1
@RobotJohnny, zaktualizowałem przykładowy kod, aby uwzględnić również obsługę inicjalizacji. Po prostu upuść w class='hide-col'dowolnym miejscu w swoim html (prawdopodobnie w thead > tr > thnajbardziej sensownym miejscu i podniesie się, aby upewnić się, że ukrywa wszystkie komórki w tej kolumnie i dynamicznie wyświetla również stopkę przywracania
KyleMit
4

I 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:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ect ...

ProblemsOfSumit
źródło
2

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<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>
</body>
</html>
Paolo Bergantino
źródło
1
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("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();
});
 </script>
lahbib
źródło
0

Bez klasy? Możesz wtedy użyć tagu:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

I pokazać im użycie:

...style.display = 'table-cell';            
Gustavo Ruiz
źródło