Tabel de date cu linii pliante, javascript

sau alte elemente HTML în afara elementului în tabel.

Iată cum arată:

în cu eticheta de clasă pe care o adăugăm și. Acest lucru se va aplica tuturor coloanelor. În interiorul acestei etichete, vom adăuga o casetă de selectare și o etichetă. Curând caseta de validare va fi ascunsă utilizând CSS.

Apoi înăuntru Cu clasa de ascundere, adăugăm tabelul HTML tr și , pe care vrem să o ascundem. În acest caz, obținem două rânduri și cinci coloane. După toate modificările, HTML ar trebui să arate astfel:

După cum puteți vedea, casetele de selectare au un atribut de date HTML5 - data-switch = = "comutare". pe care îl folosim apoi în JQuery pentru tabelul HTML tr td. pentru a comuta conținutul sub el.

stilizare

Vom crea un stil simplu și în final vom ascunde caseta de selectare. Nimic special:

Magia lui JQuery

Pentru a comuta (ascunde / afișa) linii specifice ale tabelului HTML tr. trebuie să adăugați jQuery. precum și fișierele individuale (în acest caz app.js).

Și în fișierul app.js va fi următorul cod:

Acest script se execută de fiecare dată când se schimbă starea casetei. Și din moment ce liniile sunt afișate în mod implicit, atunci dacă bifați caseta de selectare, acestea vor fi ascunse. Dacă debifați caseta de validare, acestea vor apărea din nou și așa mai departe.

În principiu, totul. Puteți avea cât mai multe blocuri HTML tr. după cum este necesar. Doar asigurați-vă că utilizați un id și un nume diferit pentru fiecare casetă de selectare, astfel încât să nu fie în conflict între ele.

Traducerea articolului "Data Table with Rows of Table Collapsible" a fost pregătită de echipa prietenoasă a proiectului Saitostroenie de la A la Z.

Articole similare

• Ștergeți tabelele de baze de date neutilizate ale plug-in-urilor de la distanță

• Un tabel de valori ca sursă de date pentru un raport universal sau cum să afișați frumos un tabel