Storing data in a table

Question

I am trying to create a user table for my website, where the user can see their first name and last name in a table after they register and login. The user detail is stored in the HTML5 Local Storage. Is there a better way to update the table with more users, rather than creating more .

Here is my table:

<table id="rankTable">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Top Score</th>
    </tr>
    <tr>
        <td id="_firstName"></td>
        <td id="_lastName"></td>
        <td></td>
    </tr>
</table>

Here is the full working snippet: https://jsfiddle.net/MuddasarAshfaq/r62zmjw4/9/

I've updated the code and added the working snippet url – Muddy Nov 14 '17 at 14:11 — Muddy, Nov 14 '17 at 14:11

score 0 · Accepted Answer · answered Nov 14 '17 at 12:42

0

Assuming that u have stored your stored firstname and lastname as "fname" and "lname" in your localStorage

var table = document.getElementById("rankTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = localStorage.getItem("fname");
cell2.innerHTML = localStorage.getItem("lname");

answered Nov 14 '17 at 12:42

Rajkumar Somasundaram

1,225
2
10
20

please open console and type localstorage; paste the output here. – Rajkumar Somasundaram Nov 14 '17 at 15:00
The local storage works fine, but nothing appears on the table – Muddy Nov 14 '17 at 15:46
your fiddle doesnt contain the table; please be clear; you are confusing me. – Rajkumar Somasundaram Nov 15 '17 at 06:16
There is a table on the HTML called rankTable, its at the very top – Muddy Nov 15 '17 at 08:32
why is that absent in your fiddle? update it in ur fiddle; I will fix ur need there itself. – Rajkumar Somasundaram Nov 15 '17 at 08:36
is this the fiddle? https://jsfiddle.net/MuddasarAshfaq/r62zmjw4/ if so I dont see the table that u are asking for? – Rajkumar Somasundaram Nov 15 '17 at 09:08
Sorry, now it's updated. Forgot to save it. This is the link: https://jsfiddle.net/MuddasarAshfaq/r62zmjw4/3/ – Muddy Nov 15 '17 at 09:30
https://jsfiddle.net/r62zmjw4/5/ updated here; this should resolve all your issues; – Rajkumar Somasundaram Nov 15 '17 at 09:54
I just ran the whole thing in a html file and it works like a charm. I dont know what is going wrong in ur end; What error does the console say? – Rajkumar Somasundaram Nov 15 '17 at 10:09
This message appears: WebSocket connection to 'ws://localhost:8125/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED – Muddy Nov 15 '17 at 10:09
This message also appears: Uncaught TypeError: Cannot read property 'insertRow' of null at storeUserDetail (data.js:36) at HTMLInputElement.onclick (register.php:97) – Muddy Nov 15 '17 at 10:16
Are u sure that the function "storeUserDetail " is invoked only on click; if so, the error musnt happen; – Rajkumar Somasundaram Nov 15 '17 at 10:24
Yes I've used "storeUserDetail" as an onclick for my register button. – Muddy Nov 15 '17 at 15:54

Storing data in a table

1 Answers1