Jak zwinąć wiersz tabeli w Bootstrap?

Używam Bootstrap 2.3.2 w mojej aplikacji i muszę całkowicie ukryć wiersz za pomocą wtyczki collapse. Poniżej znajduje się przykład:Jak zwinąć wiersz tabeli w Bootstrap?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Collapse test</title> 
     <link href="css/bootstrap.css" rel="stylesheet"> 
     <script src="js/jquery.js"></script> 
     <script src="js/bootstrap-collapse.js"></script> 
    </head> 
    <body> 

    <table class="table table-bordered table-striped"> 
     <tr> 
      <td> 
       <button type="button" class="btn" data-toggle="collapse" data-target="#collapseme"> 
       Click to expand 
       </button> 
      </td> 
     </tr> 
     <tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr> 
    </table> 
</body> 
</html>

To będzie poprawnie wyświetlić i ukryć zawartość wiersza, ale zapadnięte wiersz jest nadal widoczny. Zobacz ten zrzut ekranu:

Collapsed row still visible

Szara linia na zrzucie ekranu pokazuje dodatkowy wiersz. Co mogę zrobić, aby całkowicie usunąć ten wiersz z widoku?

Źródło

2013-08-28 Andrew Eisenberg

Używasz zwinięcia elementu div wewnątrz wiersza tabeli (tr). Więc kiedy zwiniesz div, rząd nadal tam jest. Musisz go zmienić na miejsce, w którym twój id i klasa znajdują się na tr zamiast div.

Zmień to:

<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>

do tego:

<tr class="collapse out" id="collapseme"><td><div>Should be collapsed</div></td></tr>

JSFiddle: http://jsfiddle.net/KnuU6/21/

EDIT: Jeśli nie jesteś w stanie dokonać aktualizacji do 3.0.0, znalazłem obejście w JQuery 2.3.2:

Usuń przełącznik danych i cel danych i dodaj ten JQuery do siebie przycisk r.

$(".btn").click(function() { 
    if($("#collapseme").hasClass("out")) { 
     $("#collapseme").addClass("in"); 
     $("#collapseme").removeClass("out"); 
    } else { 
     $("#collapseme").addClass("out"); 
     $("#collapseme").removeClass("in"); 
    } 
});

JSFiddle: http://jsfiddle.net/KnuU6/25/

Źródło

2013-08-28 18:56:45 Tricky12

Dzięki, Chad. Działa w skrzypcach, ale nie lokalnie, ponieważ używam 2.3.2. Próbowałem już wcześniej (w 2.3.2) i było zepsute. Domyślam się, że prawdziwą odpowiedzią jest aktualizacja do wersji 3.0.0. Ech ... nie jest to łatwa aktualizacja, ponieważ jest sporo zmian i nie ma instrukcji migracji AFAICT. –

Najpierw powinienem go wylogować: http://www.bootply.com/bootstrap-3-migration-guide –

To był mój błąd. Wrzuciłem moją wersję bootstrap (3.0.0) do mojego skrzypiec i nie sądziłem, że coś takiego zostanie uszkodzone w starszej wersji. Mam nadzieję, że to pomaga i działaj! – Tricky12

problemem jest to, że pozycja upadek (div) jest zagnieżdżony w elementach tabeli. Element div jest ukryty, tr i td tabeli są nadal widoczne, a niektóre style css są do nich stosowane (obramowanie i dopełnienie).
Dlaczego używasz tabel? Czy jest jakiś powód? Kiedy nie musisz ich używać, nie używaj ich :-)

Źródło

2013-08-28 18:57:03 chris

Rozwiązanie @ chad wydaje się godne :-) – chris

Ale nie działa w 2.3.2. :-( –

weź wersję 3er lub unikaj tabel :-) Za pomocą jquery możesz monitorować zmianę lub kliknąć wydarzenie lub smtg, a następnie łatwo możesz zmienić css. – chris

Którą wersję Bootstrap używasz? Byłem zakłopotany, że mogę uzyskać rozwiązanie @ Chad do pracy w jsfiddle, ale nie lokalnie. Sprawdziłem wersję Bootstrap używaną przez jsfiddle i używam wersji 3.0.0-rc1, podczas gdy domyślne pobieranie na getbootstrap.com to wersja 2.3.2.

W wersji 2.3.2 klasa collapse nie została zamieniona na klasę in. Klasa in została po prostu dołączona po kliknięciu przycisku. W wersji 3.0.0-rc1 klasa collapse została poprawnie usunięta, a <tr> zwija się.

Zastosowanie @ rozwiązania Czadu do HTML i spróbuj użyć tych linków do odsyłania bootstrap:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>

Źródło

2013-08-28 19:42:22 stmcallister

Tak, to 2.3.2, o czym wspomniałem w pytaniu. –

po prostu wpadł na ten sam problem, ponieważ my nadal korzystać startowej 2.3.2.

Moje rozwiązanie tego problemu: http://jsfiddle.net/KnuU6/281/

css:

.myCollapse { 
    display: none; 
} 
.myCollapse.in { 
    display: block; 
}

javascript:

$("[data-toggle=myCollapse]").click(function(ev) { 
    ev.preventDefault(); 
    var target; 
    if (this.hasAttribute('data-target')) { 
target = $(this.getAttribute('data-target')); 
    } else { 
target = $(this.getAttribute('href')); 
    }; 
    target.toggleClass("in"); 
});

html:

<table> 
    <tr><td><a href="#demo" data-toggle="myCollapse">Click me to toggle next row</a></td></tr> 
    <tr class="collapse" id="#demo"><td>You can collapse and expand me.</td></tr> 
</table>

Źródło

2014-04-04 06:04:38 trudolf

W moim przypadku ukryty wiersz tabeli obejmował wiele kolumn, więc musiałem zmienić na 'display: table-row' zamiast tylko' block'. – steakchaser

Sir, zasługujesz na więcej awansów, to była odpowiedź. Dziękuję Ci. BTW Musiałem również użyć tabeli w rzędzie na wyświetlaczu, tak jak komentarz przed tym. –

To naprawdę działa jak urok. Moje pytanie brzmi: jak mogę zrobić tę sztuczkę w wielu wierszach?Wygląda na to, że działa to tylko z jednym. –

Wystarczy ustawić dopełnienie komórki tabeli na zero. Oto jsfiddle (używając Bootstrap 2.3.2) z kodem nieco zmodyfikowany:

http://jsfiddle.net/marciowerner/fhjgn7b5/4/

JavaScript jest opcjonalne i potrzebne tylko jeśli chcesz użyć dopełnienie komórek innych niż zero.

$('.collapse').on('show.bs.collapse', function() { 
 
    $(this).parent().removeClass("zeroPadding"); 
 
}); 
 

 
$('.collapse').on('hide.bs.collapse', function() { 
 
    $(this).parent().addClass("zeroPadding"); 
 
});

.zeroPadding { 
 
    padding: 0 !important; 
 
}

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"> 
 
</head> 
 

 
<body> 
 
    <table class="table table-bordered table-striped"> 
 
    <tr> 
 
     <td> 
 
     <button type="button" class="btn" data-toggle="collapse" data-target="#collapseme">Click to expand</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="zeroPadding"> 
 
     <div class="collapse out" id="collapseme">Should be collapsed</div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

Źródło

2015-03-13 11:18:02 marciowerner

Można to zrobić bez JavaScriptu zaangażowany

(za pomocą akceptowanych odpowiedź)

HTML

<table class="table table-bordered table-striped"> 
    <tr> 
     <td><button class="btn" data-target="#collapseme" data-toggle="collapse" type="button">Click to expand</button></td> 
    </tr> 
    <tr> 
     <td class="nopadding"> 
      <div class="collapse" id="collapseme"> 
       <div class="content"> 
        Show me collapsed 
       </div> 
      </div> 
     </td> 
    </tr> 
</table>

CSS

.nopadding { 
    padding: 0 !important; 
} 

.content { 
    padding: 20px; 
}

Źródło

2017-08-04 23:42:40

Jak zwinąć wiersz tabeli w Bootstrap?

Odpowiedz

Powiązane problemy