Как отправить значение выбранных строк таблицы на другую страницу в 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

Ниже я продемонстрировал, как некоторые строки можно перенести из одной таблицы в другую на следующей странице. Однако, поскольку обе страницы, вероятно, размещены на одном и том же сервере, в большинстве случаев более целесообразно сначала собрать некоторые уникальные идентификаторы для выбранных записей таблицы, передать их на следующую страницу, а затем снова получить фактическое содержимое таблицы из исходного источника данных. (во многих случаях таблица базы данных или представление). Этот подход также сделает вашу страницу более защищенной от несанкционированных инъекций.

В случае, если таблицы должны отображаться на двух последовательных страницах, вы можете сделать следующее:

// 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('');
})

page one

  SelectFirstnameFamilyname
  JillJones
  EveAdams





this would be the second page

  noFirstnameFamilyname

Поскольку это песочница, последние строки пришлось немного изменить. На вашей странице вы должны на самом деле перенаправить вашу страницу с назначением window.location.

На второй странице вам необходимо прочитать переданную информацию из window.location.search и использовать эту информацию для добавленияэто к вашему столу там.

Answer 2

Если вам это действительно нужно. Вы можете использовать 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>