Wie können Sie Zeilen einer Tabelle anzeigen und ausblenden, indem Sie auf Tabellenkopf klicken?

Ich möchte getElementById() -Methode verwenden, um Zeilen anzuzeigen. Ich möchte auf "Header" klicken und die folgenden Zeilen anzeigen. Wie benutzt man getElementById() richtig? Sie können den Code here ausführen.Wie können Sie Zeilen einer Tabelle anzeigen und ausblenden, indem Sie auf Tabellenkopf klicken?

function hide() { 
 
    var table = document.getElementById("mytab1"); 
 
    for (var i = 0, cell; cell = table.cells\[i\]; i++) { 
 
    cell.style.display = "none"; 
 
    } 
 
}

<html> 
 

 
<head> 
 
    <style> 
 
    ... 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <th onclick="hide()"> Header </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 1 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> Quit </td> 
 
    </tr> 
 

 
    </table> 
 

 
</body> 
 

 
</html>

Quelle

2017-10-25 Jim

Was das aktuelle Ergebnis ist? Bitte machen Sie Geige –

Der Code, den Sie verknüpft haben, funktioniert nicht. – Amit

Nun, erstens, was Sie falsch machen, erstens ist, kann ich nicht document.getElementById finden ("mytab1"); mytab1 id, ich meine für mytab1 zu zeigen, müssen Sie eine entsprechende ID erstellen. Nun ein Beispiel von Ihnen zu erstellen, versuchen Sie dies,

<table id="mytab1"> 
    <tr> 
    <th onclick="hide()" style="cursor:pointer;"> Header </th> 
    </tr> 


    <tr ><td> 1 </td></tr> 

    <tr ><td><a style="cursor:pointer;"> Quit </a></td></tr> 

    </table> 


    <script> 
function hide() { 
       var table = document.getElementById("mytab1"); 
       alltr = table.querySelectorAll("tr"); 

       for (var i = 1; i < alltr.length-1; i++) { 
        alltr[i].style.display = (alltr[i].style.display == "none") ? "" : "none"; 
       } 
      } 
    </script>

versuchen, und sehen, ob es funktioniert, wenn es mir nicht sagen, lösen läßt es zusammen.

Quelle

2017-10-25 10:22:19 Shasha

Hallo funktioniert nicht chek es hier https://www.w3schools.com/code/tryit.asp?filename=FKUOCSESGB0V – Jim

@Dimitris Ich schaue auf Ihren Code wird, bearbeiten Sie mir eine Sekunde. – Shasha

@Dimitris Fertig, repariert es verwenden es funktioniert. – Shasha

Mit jQuery können Sie diese Ausgabe erhalten.

$(function() { 
 
    var $rows = $('#mytab1 tbody'); 
 
    $("#mytab1 th").on("click", function() { 
 
    // alert("Clicked"); 
 
    $rows.hide(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytab1"> 
 
    <thead> 
 
    <th> Header </th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 1 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> Quit </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2017-10-25 10:23:48 Bhargav

Es funktioniert ok, aber es ist auch die Kopfzeile versteckt. – Jim

Ich habe meinen Code aktualisiert jetzt sehen Sie die Ausgabe @Dimitris – Bhargav

Ich habe Gebrauch etwas andere Methode in Bezug auf die vorhandenen Antworten verglichen. Außerdem wird Javascript anstelle von jQuery verwendet.

Zunächst einmal stattdessen die Elemente durch Inline-Styles zu verstecken, können Sie CSS:

table.bodyHidden tr:nth-child(odd), 
table.bodyHidden tr:nth-child(even) { 
    display: none; 
} 

table.bodyHidden tr:first-child { 
    display: block; 
}

Dann, wenn Sie mehrere Tabellen, und wollen nicht die ID der Tabelle in der hart codieren Sie können über event.target zum <table>-Element im Click-Handler navigieren und dann die Klasse bodyHidden darauf umschalten.

function hide(event) { 
 
    var tableNode = undefined; 
 
    var currentNode = event.target; 
 
    
 
    // Search for the table node among the parent elements of the element that triggered the click event. 
 
    while(tableNode == undefined) { 
 
    if(currentNode.nodeName == 'TABLE') { 
 
     tableNode = currentNode;  
 
    } else { 
 
     currentNode = currentNode.parentNode; 
 
    } 
 
    } 
 
    
 
    // Toggle the bodyHidden class. 
 
    if(tableNode.classList.contains("bodyHidden")) { 
 
    tableNode.classList.remove("bodyHidden"); 
 
    } else { 
 
    tableNode.classList.add("bodyHidden"); 
 
    } 
 
}

table.bodyHidden tr:nth-child(odd), 
 
table.bodyHidden tr:nth-child(even) { 
 
    display: none; 
 
} 
 

 
table.bodyHidden tr:first-child { 
 
    display: block; 
 
}

<body> 
 
    <table> 
 
    <tr> 
 
     <th onclick="hide(event)"> Header </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 1 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> Quit </td> 
 
    </tr> 
 

 
    </table> 
 

 
</body>

Quelle

2017-10-25 10:39:21 Nisarg

Wie können Sie Zeilen einer Tabelle anzeigen und ausblenden, indem Sie auf Tabellenkopf klicken?

Antwort

Verwandte Themen