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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Table</title>
</head>
<body>
<h1 class="display-4 text-center">Tables</h1>
<br>
<div class="container">
<div class="row">
<input class="text-center" type="text" id="name">
<input type="button" value="submit" id="sub-btn">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Action</th>
</tr>
</thead>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
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
window.onload= function (){
document.getElementById('sub-btn').addEventListener('click', formSubmit);
document.getElementById('tdata').addEventListener('click', deleteRow);
}
function formSubmit(e){
var tbody = document.getElementById('tdata');
var newRow = tbody.insertRow();
let sno = newRow.insertCell(0);
sno.innerHTML = getSno();
let fname = newRow.insertCell(1);
fname.innerHTML = document.getElementById('name').value;
let del = newRow.insertCell(2);
del.innerHTML = `<a href="#" class="delete"><i class="fa fa-trash"></i></a></td>`;
document.getElementById('name').value = '';
e.preventDefault();
}
var serialNumber = 0;
function getSno(){
serialNumber++
return serialNumber;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run