JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<h1>With thead and tbody</h1>
<table id="myTable">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    </tbody>
</table>
                
<h1>Without thead and tbody</h1>
<table id="myTable2">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>

CSS

th {
 font-weight: bold;
 background-color: #eee;
 padding: 5px;
}
td
{
    border:1px solid #ccc;
}
h1 {
 margin-top: 10px;
 font-weight: bold;  
}

JavaScript

$(function() {
    $myTable = $("#myTable");
    
    $("thead > tr", $myTable).click(function() {
        $("tbody > tr", $myTable).toggle();
    });
    
    
    $myTable2 = $("#myTable2");
    $("tr:eq(0)", $myTable2).click(function() {
        $("tr:gt(0)", $myTable2).toggle();
    });
});