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>');

Answer 1

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 🙂