如何使用Javascript将特定内容从一个表复制到另一个表

我目前正在开发一种工具，用于在不同的表中显示大量数据。一个表中不同数量的数据必须多次分配到另一个表中。加载这个视图几乎需要20秒，我希望通过操作DOM而不是在PHP中分配每个匹配项来减少时间。我想在第一个表中隐藏一些标识符，单击一行，在下一个元素中显示附加数据

以下是以前表格的外观示例：

<table>
    <tr>
        <th>Name</th>
    </tr>
    <tr class="iWantToClickThis">
        <td>Bla Bla</td>
        <td style="visibility:hidden;">3,5</td>
    </tr>
</table>

<table style="visibility:hidden">
    <tr>
        <th>Additional Header</th>
    </tr>
    <tr id="1">
        <td>Additional Info 1</td>
    </tr>
    <tr id="2">
        <td>Additional Info 2</td>
    </tr>
    <tr id="3=>
        <td>Additional Info 3</td>
    </tr>
    <tr id="4">
        <td>Additional Info 4</td>
    </tr>
    <tr id="5">
        <td>Additional Info 5</td>
    </tr>
    <tr id="6">
        <td>Additional Info 6</td>
    </tr>
</table>

名称
布拉布拉
3,5
附加标题
附加信息1
附加信息2
附加标题
附加信息3
附加信息5

---

我已经了解了如何通过一行实现这一点，但是如何通过不同的行实现这一点，通过它们的ID识别它们？

您是否必须通过ID引用它们？如果它们符合某个条件，您可以为它们添加一个类，然后使用该类来移动它们吗？此链接可能会帮助您[1]：ID是两者之间的唯一关系。我可以从另一个条目添加相应的id。这些表之间有许多关系。第一个表可以有许多与第二个表具有相同id的行。请在此处描述您实际想要实现的目标（请参阅）。听起来好像您希望动态显示或不显示现有数据集的完整“列”——在这种情况下，您不应该创建多个表，而应该使用一个表，只需隐藏不需要的列。最好的（跨浏览器）方法是给TD元素一个与其列对应的类，然后通过向表元素本身添加一个类来隐藏它们，方法是提供CSS规则，使用子组合符。第一个表是一个包含500个位置的材质列表。第二个是一份可能有20份工作的工作清单。单击任何位置，我想显示材料用于的所有作业。列表中的每个职位可能至少用于一项工作。我不想将同一个作业在每个位置下的表中复制500次，然后用css将其隐藏，因为用户通常只是在寻找一个或两个位置。我想完全隐藏作业列表，只在单击位置下方的表中复制所需的作业。

<table>
    <tr>
        <th>Name</th>
    </tr>
    <tr class="iWantToClickThis">
        <td>Bla Bla</td>
        <td style="visibility:hidden;">3,4,5</td>
    </tr>
    <tr>
        <td colspan="2>
            <table>
                <tr>
                    <th>Additional Header</th>
                </tr>
                <tr id="3">
                    <td>Additional Info 3</td>
                </tr>
                <tr id="5">
                    <td>Additional Info 5</td>
                </tr>
            </table>
        </td>
</table>