Verstecke mehrere Tabellenspalten mit Javascript

Ich habe unter Tabelle mit Inhalt, und ich möchte die ersten zehn Spalten der Tabelle auf Knopfdruck ausblenden. Bitte schlagen Sie den Code vor, um die ersten 5 Spalten in reinem Javascript auszublenden.Verstecke mehrere Tabellenspalten mit Javascript

<table id="tblMain"> 
<tr> 
<td>00002</td> 
<td>1786</td><td>630</td><td>88</td> 
<td>1095</td><td>266</td><td>38</td> 
<td>659</td><td>364</td><td>49</td> 
<td>32</td><td>0</td><td>1</td> 
<td>1009</td><td>458</td><td>78</td> 
</tr><tr> 
<td>00003</td> 
<td>1852</td><td>427</td><td>1627</td> 
<td>1319</td><td>191</td><td>736</td> 
<td>501</td><td>236</td><td>887</td> 
<td>32</td><td>0</td><td>4</td> 
<td>1375</td><td>418</td><td>1287</td> 
    </tr></table>

Quelle

2017-10-20 erdeepak

Willkommen bei Stack-Überlauf! Du scheinst jemanden zu bitten, etwas Code für dich zu schreiben. Stack Overflow ist eine Frage-Antwort-Website, kein Code-Schreibdienst. Bitte [siehe hier] (http://stackoverflow.com/help/how-to-ask) um zu erfahren, wie man effektive Fragen schreibt. –

Ich würde es tun, indem ich die Interaktion mit JavaScript aufspalte und mit CSS verstecke. Verwenden Sie <cols> und dann so etwas wie dieses:

td {border: 1px solid #ccc;} 
 
.hide td:nth-child(1), 
 
.hide td:nth-child(2), 
 
.hide td:nth-child(3), 
 
.hide td:nth-child(4), 
 
.hide td:nth-child(5), 
 
.hide td:nth-child(6), 
 
.hide td:nth-child(7), 
 
.hide td:nth-child(8), 
 
.hide td:nth-child(9), 
 
.hide td:nth-child(10) {display: none;}

<table id="tblMain"> 
 
    <tr> 
 
    <td>00002</td> 
 
    <td>1786</td> 
 
    <td>630</td> 
 
    <td>88</td> 
 
    <td>1095</td> 
 
    <td>266</td> 
 
    <td>38</td> 
 
    <td>659</td> 
 
    <td>364</td> 
 
    <td>49</td> 
 
    <td>32</td> 
 
    <td>0</td> 
 
    <td>1</td> 
 
    <td>1009</td> 
 
    <td>458</td> 
 
    <td>78</td> 
 
    </tr> 
 
    <tr> 
 
    <td>00003</td> 
 
    <td>1852</td> 
 
    <td>427</td> 
 
    <td>1627</td> 
 
    <td>1319</td> 
 
    <td>191</td> 
 
    <td>736</td> 
 
    <td>501</td> 
 
    <td>236</td> 
 
    <td>887</td> 
 
    <td>32</td> 
 
    <td>0</td> 
 
    <td>4</td> 
 
    <td>1375</td> 
 
    <td>418</td> 
 
    <td>1287</td> 
 
    </tr> 
 
</table> 
 
<button onclick="document.getElementById('tblMain').classList.toggle('hide');">Toggle</button>

Quelle

2017-10-20 08:36:34 Soolie

Verstecke mehrere Tabellenspalten mit Javascript

Antwort

Verwandte Themen