如何修改Table Row Toggle脚本以实现两个可切换表格？

没问题，这个问题很常见——原脚本是全局操作所有<table>和<button>，点击任何按钮都会切换所有表格的行，所以我们只需要给每个表格和对应的按钮建立一对一的关联，就能实现独立控制了。下面是具体的修改方法：

步骤1：给表格和按钮添加关联标识 #

我们用data-*属性来给每个表格和按钮配对，比如给表格加data-table属性，对应的按钮加data-target属性，属性值保持一致，这样就能明确按钮要控制哪个表格：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 第一个表格和对应按钮 -->
<table data-table="table1">
    <tr><td>表格1-行1</td></tr>
    <tr><td>表格1-行2</td></tr>
    <tr><td>表格1-行3</td></tr>
    <tr><td>表格1-行4</td></tr>
</table>
<button data-target="table1">切换表格1</button>

<!-- 第二个表格和对应按钮 -->
<table data-table="table2">
    <tr><td>表格2-行1</td></tr>
    <tr><td>表格2-行2</td></tr>
    <tr><td>表格2-行3</td></tr>
    <tr><td>表格2-行4</td></tr>
</table>
<button data-target="table2">切换表格2</button>

步骤2：修改JS脚本实现独立控制 #

不再全局操作所有表格，而是在按钮点击时，根据按钮的data-target值找到对应的表格，只对这个表格的行进行隐藏/显示操作：

// 初始隐藏每个表格除第一行外的所有行
$('table').find('tr:gt(0)').hide();

// 给按钮绑定点击事件，只控制对应的表格
$("button").on("click", function() {
    // 获取当前按钮要控制的表格标识
    const targetTable = $(this).data('target');
    // 精准定位目标表格，切换其除第一行外的行
    $(`table[data-table="${targetTable}"]`).find('tr:gt(0)').toggle();
});

逻辑说明 #

• data-*是HTML5标准的自定义属性，用来存储页面私有数据，非常适合做这种元素关联，可读性和维护性都很强。
• 点击按钮时，通过$(this).data('target')获取当前按钮对应的表格标识，再用属性选择器精准定位目标表格，完全不会影响其他表格的状态。
• 初始隐藏逻辑可以保留全局操作，因为我们需要所有表格的非首行默认隐藏；如果有个别表格不需要默认隐藏，单独给它加个特殊class再调整逻辑即可。

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