使用 Javascript 将单元格数据从一个表拉到另一个表答案

【问题标题】：Using Javascript to pull cell data from one table to another使用 Javascript 将单元格数据从一个表拉到另一个表
【发布时间】：2016-01-15 09:14:33
【问题描述】：

我不知道这是否可行，而且我一直在挖掘代码几个小时，但没有运气，所以我要试一试。

假设我在页面上有一个表格。它包含以下内容：

<table id="srctb">
    <tr>
        <td>Users</td>
        <td>Musers</td>
        <td>Abusers</td>
    </tr>
    <tr>
        <td>50</td>
        <td>34</td>
        <td>16</td>
    </tr>
</table>

在不同的页面上，我有另一张桌子。它看起来像这样：

<table id="desttb">
    <tr>
        <td>Users</td>
        <td>Musers</td>
        <td>Abusers</td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

无需手动输入值，就像它们在 srctb 表中一样，我想用完全相同的值填充表 desttb。

是否有一段 javascript 代码可以获取表 srctb 中单元格的值，并将其粘贴到表 desttb 中的单元格中？

非常感谢任何帮助！

编辑：如果没有办法使用 javascript，我相信我可以在一定程度上使用 jquery，但我不确定。我知道有更好的方法可以做到这一点，但不幸的是，需要进行此操作的站点的功能相当有限。

【问题讨论】：

也就是说你想复制表srctb的内容？
“在不同的页面上”是什么意思：在包含srctb 的页面之后加载的真的是新的浏览器页面吗？
@hindmost 是的，我想将表 srctb 的内容复制到表 desttb。 AxelAmthor desttb 被编码到站点的 html 布局中。内容需要经常更新。不幸的是，我是唯一可以进入 html 编码并更新 desttb 的人。然而，由于缺乏更好的描述，srctb 被作为代码粘贴在网站“前端”的帖子中。对于与我一起工作的人来说，编辑起来要容易得多，因为他们不必通过 html 来挖掘它。因此，当他们更新该表时，它需要自动拉到 desttb。
如果这些表位于不同的页面上，则无法通过 javascript 进行此类复制。你必须通过服务器端的方式来做到这一点。
@AxelAmthor（抱歉，第一个回复搞砸了标签） desttb 被编码到网站的 html 布局中。内容需要经常更新。不幸的是，我是唯一可以进入 html 编码并更新 desttb 的人。然而，由于缺乏更好的描述，srctb 被作为代码粘贴在网站“前端”的帖子中。对于与我一起工作的人来说，编辑起来要容易得多，因为他们不必通过 html 来挖掘它。因此，当他们更新该表时，它需要自动拉到 desttb。

标签： javascript html html-table cell duplicate-data

【解决方案1】：

您可以将表格的内容保存在本地存储对象中。

第 1 页：

window.onbeforeunload = function() { // when you switch page
  localStorage.setItem("content", document.getElementById("from").innerHTML); // save the data to localstorage
};

第 2 页：

window.onload = function () {
  var content = localStorage.content;
  if (content !== undefined) {
    document.getElementById("to").innerHTML = content;
  }
}

我希望这行得通！

code example

【讨论】：

恐怕没有运气，但你要努力！
@VexVaudlain 你在使用服务器/本地主机吗？
这很可能是用户错误。我只是想确保 - 我只是安装上面引用的代码，是吗？我可以将它安装在第 1 页和第 2 页的代码中的任何位置？
@VexVaudlain 你能澄清你的问题吗？我正在使用“代码示例”中的文件并使用python3 -m http.server 提供服务。
@myCyborg 该死的......是的，如果网站有能力，那会奏效。就像我之前提到的，它可以做什么和不能做什么是非常有限的。我想我会尝试一些不同的东西。感谢所有的帮助！

【解决方案2】：

假设您可以使用 jQuery 1.8 或更高版本，您应该可以执行以下操作：

$.get('/srctab.html').done(function(data) {
  $.parseHTML(data).find('#srctb > *').appendTo('#desttb');
});

这使用 AJAX 抓取另一个页面，将其解析为 HTML，找到 #srctb 的后代，并将它们附加到 #desttb。

我还没有对此进行测试，它可能与每个表都有一个包含行的隐式或显式 tbody 的想法相冲突。

此外，如果您需要实际数据值而不是整行，则必须使用一些更复杂的选择器来获取它们，但抓取页面并解析它的基本思想仍然适用。

【讨论】：