I want to collapse table just click first row

Issue

I have a table which have some rows collapsible. When I click any rows, all table collapsed.(except first row)

But I want to collapse all table when just I click first row. So the other rows will not collaps the table.

Here is my code:

    <table  id="customers2" style="width:100%" onclick="expandCollapseTable(this)">
        //first row
        <tr class="gradient">
        <th  style="width:60%">Fruits</th>
        <th  style="width:40%">Value</th>
        </tr>
        //second row            
        <tr style="display:none">
             <td>Apple</td>
             <td>10</td>
        </tr>
        //third row         
        <tr style="display:none">
             <td>Orange</td>
             <td>20</td>
        </tr>
    </table>

Here is my JS code:

    <script type="text/javascript">
    function expandCollapseTable(tableObj)
    {
        var rowCount = tableObj.rows.length;
        for(var row=1; row<rowCount; row++)
        {
            rowObj = tableObj.rows[row];
            rowObj.style.display = (rowObj.style.display=='none') ? '' : 'none';
        }
        return;
    }
    </script>

Solution

I modify your function to this;

function expandCollapseTable(tableObj) {
   var tableObj = document.getElementById("customers2");
   var firstRow = tableObj.rows[0];
   if (firstRow.style.display == 'none') {
       firstRow.style.display = '';
   } else {
       firstRow.style.display = 'none';
   }
}

In this function, we're getting the first row of the table using tableObj.rows[0]. Then, we're checking if the display style of this row is 'none'. If it is, we're setting it to an empty string to make it visible. If it's not 'none', we're setting it to 'none' to hide it.

This way, when you click on the first row, the table will collapse or expand. However, when you click on the other rows, nothing will happen because this function isn't attached to them.

I also modify you html to this;

<table id="customers2" style="width:100%">
   <!--first row-->
   <tr class="gradient" onclick="expandCollapseTable(this)">
       <th style="width:60%">Fruits</th>
       <th style="width:40%">Value</th>
   </tr>
   <!--second row-->
   <tr>
       <td>Apple</td>
       <td>10</td>
   </tr>
   <!--third row-->
   <tr>
       <td>Orange</td>
       <td>20</td>
   </tr>
</table>

As you notice, I've moved the onclick attribute from the table element to the tr element of the first row. Now, the expandCollapseTable function will be called when you click on the first row, but not when you click on the other rows.

Modified Code

function expandCollapseTable() {
   var tableObj = document.getElementById("customers2");
   var rowCount = tableObj.rows;
   for (var row = 1; row < rowCount.length; row++) {
       if (rowCount[row].style.display === 'none') {
           rowCount[row].style.display = '';
       } else {
           rowCount[row].style.display = 'none';
       }
   }
}

table, tr, th, td{
   border: 1px solid;
}

<table id="customers2" style="width:100%">
   <!--first row-->
   <tr class="gradient" onclick="expandCollapseTable()">
      <th style="width:60%">Fruits</th>
      <th style="width:40%">Value</th>
   </tr>
   <!--second row-->
   <tr>
       <td>Apple</td>
       <td>10</td>
   </tr>
   <!--third row-->
   <tr>
       <td>Orange</td>
       <td>20</td>
   </tr>
</table>

Answered By - Keyboard Corporation