Added row to a table with jQuery but added rows disappear with browser refresh

Question

I added rows to a html table with jQuery, but when I refresh the browser, the rows disappear. How can I get the rows to stay?

<TABLE id="dataTable" width="100%" align="center">
    <TR align="center" border="1">
        <TH></TH>
        <TH>ID </TH>
        <TH>Name</TH>
        <TH>Status</TH>
    </TR>
    <TR align="center">
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" value="Submission 1" /> </TD>
        <TD>Working version</TD>
    </TR>
</TABLE>

<script type="text/javascript">

$(document).ready(function(){
$('#createNew').click(function() {
    var table = document.getElementById('dataTable');

    var rowCount = table.rows.length;

    $('#dataTable tr:last').after('<TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD>'+ rowCount + '</TD><TD> <INPUT type="text" value="Submission 1" />   </TD><TD>Working version</TD></TR>');

The html is rendered from the file each time the page is requested - if you want to save changes to need to store the changes somewhere and display them on load ... are you using a server side language ? — Manse, Jul 03 '12 at 15:10
You need to record the creation of the rows somehow (such as an `` for instance) and then recreate the rows again when the page shows. Are you using any server-side coding? — freefaller, Jul 03 '12 at 15:11

score 0 · Answer 1 · answered Jul 03 '12 at 15:10

0

With only jQuery you can't.

You need to save your change on a database for example.

Edit : Or you can use php, $_SESSION, $_COOKIE .... I don't know, you have lots of way, but not with only jQuery.

answered Jul 03 '12 at 15:10

Clément Andraud

9,103
25
80
158

score 0 · Answer 2 · answered Jul 03 '12 at 15:12

This will depend on where you are getting the data from to create the table in the first place. If you are retrieving data from a database and sticking it into a tablem, you're going to need to insert the data into the database with your jquery by making an ajax callback.

see this for details

score 0 · Answer 3 · edited Jul 04 '12 at 07:27

0

You can use .data function to bind the data to the table and then copy it as many times as possible?? .data prevents data from memory leaks you can check the same at api.jquery.com

edited Jul 04 '12 at 07:27

Favonius

13,959
3
55
95

answered Jul 03 '12 at 16:17

jack sparrow

173
1
1
9

score 0 · Accepted Answer · edited May 23 '17 at 12:04

This is just a suggestion, but You can try to store Your new rows in cookie, like shown here:
how to store an array in jquery cookie?

This way after page refresh You will get Your rows back (of course You need to read cookie and add rows when page is loaded again).

But the best solution would be to use server-side code to store new rows into database and load them every time You refresh page, this way new records will be visible for everyone who will access that page (or only for specific user if You'll add user identification, but that's bit off Your question).

Check article from @Kell answer, this is really easy to implement :)

Added row to a table with jQuery but added rows disappear with browser refresh

4 Answers4