Table does not keep selection

I am using a Wizard approach.

In the first screen, I have used logic to highlight rows of table. User moves to second screen/page and now user is asked to fill textbox and submit the form. After submitting form, when user returns to the first screen/page, the rows are not highlited anymore.

Please share some code of how to retain table row selection even when i am moving from one page to another and the开发者_JAVA百科n back to the same page. I do not want to use plugin

If you're loading a new page, your javascript context will be reset; you can't "remember" values from one page to the next.

So, options:

1) don't reload the page; have multiple sections (e.g. divs) and show/hide different ones using javascript (which may or may not involve ajax, and need not be a tabbed interface). In this scenario you can store the selected rows in a javascript variable.

2) reload the page, but post the selected rows to the server and remember them there (e.g. in a session), and select them again when the first page is returned to. Can't offer more detail on how to do that without knowing what you're using on the server side (e.g. PHP, Java) but the idea is to use javascript to put the selected rows into the POST data, e.g. by setting a hidden field for the selected rows.

3) have the various "screens" you are loading be within an iframe, and store the selected rows from the first screen in a javascript variable in the context of the parent page (which never reloads). You can do this if both the inner and outer pages are in the same domain.

In addition to JacobM's suggestions:

4) If you only have to store a small amount of data (e.g. A dozen or so row indicies) and the data doesn't have to persist for too long, you could just use cookies to store the row indicies between pages.

5) Depending on your target browsers, you may be able to use DOM Storage or something like PersistJS