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

问题描述：

我不知道这是否可能，并且我一直在为没有运气的小时寻找代码，所以我要给这个镜头一个镜头。使用Javascript将单元格数据从一个表格拉到另一个表格

假设我在一页上有一张桌子。它包含以下内容：

<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'的内容？ – hindmost

“你在另一个页面上”是什么意思：这个真的是新的浏览器页面加载了'srctb'之后的页面吗？ –

@ behindmost是的，我想将表srctb的内容复制到表desttb。 AxelAmthor将desttb编码到网站的html布局中。内容将需要经常更新。不幸的是，我是唯一可以进入html编码的人，并且更新了desttb。然而，srctb是 - 因为没有更好的描述 - 粘贴在网站“前端”的帖子中作为代码。对于和我一起工作的人来说编辑起来要容易得多，因为他们不需要通过html来挖掘它。所以，当他们更新该表时，它需要自动通过终端。 –

答

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

第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您使用的是服务器/本地主机？ – mrCyborg

@VexVaudlain我有一个错误，它现在的作品！ – mrCyborg

答

假设你可以使用jQuery 1.8或更高版本，你应该能够做这样的事情：

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

这抓起使用AJAX的其他网页，解析为HTML，发现后代#srctb，并将它们追加到#desttb。

我还没有测试过，它可能会违背每个表都有一个隐含或显式包含行的tbody的想法。另外，如果你需要实际的数据值而不是整行，你将不得不使用一些更复杂的选择器来获取它们，但抓住页面并解析它的基本思想仍然适用。

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

相关推荐