如何实现仅点击表格首行触发其余行展开折叠功能？

修改思路 #

把点击事件从整个表格移到首行上，仅点击首行时触发折叠/展开逻辑，其他行点击无反应。

修改后的HTML代码 #

<table id="customers2" style="width:100%">
    <!-- first row -->
    <tr class="gradient" onclick="expandCollapseTable(this.parentElement)">
        <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>

保留原JavaScript代码（无需修改） #

<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>

关键说明 #

• 移除<table>标签上的onclick事件，将其绑定到首行的<tr>标签
• 调用函数时传入this.parentElement，确保函数能获取到表格对象，原有折叠逻辑不受影响
• 其他行未绑定点击事件，点击时不会触发折叠/展开操作

内容的提问来源于stack exchange，提问作者zorbey aslan