使用Javascript將單元格數據從一個表拉到另一個表

Question

我不知道這是否可行，而且我一直在努力尋找代碼，但運氣不佳，所以我將試一試。

假設我在頁面上有一張桌子。 它包含以下內容：

<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，但是我不確定。 我知道有更好的方法可以做到這一點，但是不幸的是，需要工作的站點功能有限。

Answer 1

您可以將表的內容保存在localstorage對象中。

第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;
  }
}

我希望這行得通！

代碼示例

Answer 2

假設您可以使用jQuery 1.8或更高版本，則應該能夠執行以下操作：

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

這將使用AJAX捕獲另一個頁面，將其解析為HTML，找到#srctb的后代，並將其附加到#desttb。

我尚未對此進行測試，並且可能與每個表都有一個包含行的隱式或顯式tbody的想法產生沖突。

另外，如果您需要實際的數據值而不是整個行，則必須使用一些更復雜的選擇器來獲取它們，但是獲取頁面並對其進行解析的基本思想仍然適用。