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
<!-- Created by Tony Stark -->
<!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>
<button onclick="resetData()">RESET</button>
<button><a href="#" id="profileLink">Go to Profile</a></button>
<h1>Table:</h1>
<table id="tb">
<tr>
<th>Name</th>
<th>Age</th>
<th>Mobile</th>
</tr>
</table>
<script src="script.js"></script>
</body>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
/* Created by Tony Stark */
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 addData() {
let name0 = document.getElementById("name").value;
let age0 = document.getElementById("age").value;
let mobile0 = document.getElementById("mobile").value;
// If the input fields are empty, keep the existing localStorage values
name0 = name0 || localStorage.getItem("name");
age0 = age0 || localStorage.getItem("age");
mobile0 = mobile0 || localStorage.getItem("mobile");
// Store the data in localStorage
localStorage.setItem("name", name0);
localStorage.setItem("age", age0);
localStorage.setItem("mobile", mobile0);
// Clear the input fields
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.getElementById("mobile").value = "";
// Display the data in the table
displayData();
}
function displayData() {
let table = document.getElementById("tb");
// Clear the table rows (except the header)
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run