如何在javascript中将选定的表行值发送到另一个页面

Question

我有 2 页和 2 个表，在第 1 页（表 1）我想将选定的行发送到第 2 页（表 2），在表 2 中我显示选定的行

这是第 1 页的第一个表格：

<table class="src-table">
    <tr>
        <th>Select</th>
        <th>Firstname</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>Jill</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>Eve</td>
    </tr>
</table>
<br>
<input type="button" value="Submit" id="submit">

如下图

这是第 2 页中的第二个表格：

<table class="target-table">
    <tr>
        <th>Select</th>
        <th>Firstname</th>
    </tr>
</table>

如下图

Answer 1

如果你真的需要这个。你可以使用localStorage。

localStorage 不在沙盒中工作。但您也可以在您的应用程序中使用它。

当您需要保存选择的存储时运行storeItems（例如在元素选择上） 在目标表的页面上运行 appendStoredToAnouther 窗口事件 window.onload

function storeItems() {
  const selectedItems = document.querySelectorAll("#first-table .selected");
  const selectedHtml = nodeListToString(selectedItems);
  
  localStorage.add('selectedTableItems', selectedHtml);
}

function nodeListToString(nodeList) {
  let string = '';
  nodeList.forEach(function(node) {
    string += node.outerHTML;
  });
  return string;
}

function appendStoredToAnouther() {
  const itemsHtml = window.localStorage.get('selectedTableItems');
  
  const targetTable = document.getElementById('target-table');
  targetTable.innerHTML = itemsHtml + targetTable.innerHTML;
}

<table id="first-table">
  <tr class="selected">
    <td>1</td>
    <td>Selected</td>
    <td>Item</td>
  </tr>
  <tr class="selected">
    <td>1</td>
    <td>Selected</td>
    <td>Item</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Not Selected</td>
    <td>Item</td>
  </tr>
</table>

<button type="button" onclick="storeItems()">Send to anouther</button>
<button type="button" onclick="appendStoredToAnouther()">Append stored to anouther</button>

<table id="target-table">
  <tr class="selected">
    <td>1</td>
    <td>Selected</td>
    <td>Item</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Not Selected</td>
    <td>Item</td>
  </tr>
</table>

Answer 2

下面我演示了如何将一些行从一个表格转移到下一页上的另一个表格。但是，由于两个页面可能托管在同一台服务器上，因此在大多数情况下，首先为选定的表记录收集一些唯一标识符，将它们传输到下一页，然后再次从原始数据源获取实际的表内容更为实际（在许多情况下是数据库表或视图）。这种方法还可以使您的页面更安全地防止未经授权的注入。

如果表格要在两个连续页面中显示，您可以执行以下操作：

// shortcut for utility function querySelectorAll():
const qsa=(s,o)=>[...(o||document)['querySelectorAll'](s)];
const log=qsa('#log')[0];

qsa('#submit')[0].addEventListener('click',function(){
 var dat="tbl="+JSON.stringify(
   qsa('tr',qsa('.src-table')[0]).filter(tr=>qsa('input:checked',tr).length)
                            .map(tr=>qsa('td',tr).slice(1)
                            .map(td=>td.innerHTML))
 );
 log.innerHTML+="<hr>dat:"+dat;
 log.innerHTML+="\nwindow.location=\"page2.html?\"+encodeURIComponent(dat)";

 // this second part would be placed in the onload section if the next page:
 log.innerHTML+='var dat=window.location.search.substr(1)'
  
 var args=dat.split("&").reduce((a,v)=>{
   var t=v.split('=');
   a[t[0]]=JSON.parse(decodeURIComponent(t[1]));
   return a;},
   {}
 );
  qsa('.trg-table')[0].innerHTML+=
  args.tbl.map((r,i)=>'<tr><td>'+(i+1)+'</td><td>'+r.join('</td><td>')+'</td></tr>').join('');
})

<h2>page one</h2>
<table class="src-table">
  <tr><th>Select</th><th>Firstname</th><th>Familyname</th></tr>
  <tr><td><input type="checkbox"></td><td>Jill</td><td>Jones</td></tr>
  <tr><td><input type="checkbox"></td><td>Eve</td><td>Adams</td></tr>
</table>
<br>
<input type="button" value="Submit" id="submit">

<h2>this would be the second page</h2>
<table class="trg-table">
  <tr><th>no</th><th>Firstname</th><th>Familyname</th></tr>
</table>
<pre id="log"></pre>

由于这是一个沙盒，所以最后几行必须稍作修改。在您的页面中，您应该实际上使用window.location 分配重定向您的页面。

然后，您需要在第二页上读取来自window.location.search 的传递信息，并使用该信息将其附加到那里的表格中。