How to send selected table rows value to another page in javascript

Question

I have 2 pages and 2 tables, in page 1(table 1) I want to send selected rows to page 2(table 2) where in table 2 I show the selected rows

This is the first table in page 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">

Like image below

This is the second table in page 2:

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

Like image below

Answer 1

If you really need this. You can use localStorage .

localStorage not working in the sandbox. But you can use it your application as well.

run storeItems when you need to save selected to store (for example on element select) run appendStoredToAnouther on window event window.onload on page with the target table

 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

Below I demonstrated how some lines could be carried over from one table to another one on a following page. However, since both pages are probably hosted on the same server it is in most cases more practical to first collect some unique identifiers for the selected table records, transmit them to the next page and then get the actual table contents from the original data source again (in many cases a database table or view). This approach will also make your page safer against unauthorised injections.

In case that the tables are to be shown in two consecutive pages you can do the following:

 // 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>

As this is a sandbox the last lines had to modified a bit. In your page you should actually redirect your page with the window.location assignment.

On the second page you then need to read the passed information from window.location.search and use that information to append it to your table there.