html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Form:</h1>
<input placeholder="name" id="name"><br>
<input placeholder="age" id="age">
<br>
<input placeholder="mobile" id="mobile">
<br> <button onclick="addData()">SUBMIT</button>
<h1>Table:</h1>
<table id="tb">
<tr>
<td>Name</td>
<td>Age</td>
<td>Mobile</td>
</tr>
</table>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
table, td, tr{
border:1px solid;
border-collapse:collapse;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function person(name, age, mobile){
this.name = name;
this.age = age;
this.mobile = mobile;
}
function addData(){
let table = document.getElementById("tb");
let newRow = table.insertRow(table.rows.length);
var name0 = document.getElementById("name").value;
var age0 = document.getElementById("age").value;
var mobile0 = document.getElementById("mobile").value;
var info = [new person(name0, age0, mobile0)];
var catalogue = [];
catalogue.push(info)
localStorage.setItem("infoCatalogue", JSON.stringify(catalogue))
var gottenInfo = JSON.parse(localStorage.getItem("infoCatalogue"));
var name1 = gottenInfo[0];
var age1 = gottenInfo[1];
var mobile1 = gottenInfo[2];
newRow.insertCell(0).innerHTML = name1;
newRow.insertCell(1).innerHTML = age1;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run