How to Add Rows To The Table Dynamically Using JavaScript?
JavaScript add rows to the table dynamically: This type of component can achieve using JavaScript without any plugins or third-party code.
Now let’s see how to make this Component:
Open your code editor and create three files:
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript add rows to the table dynamically</title>
</head>
<body>
</body>
</html>In this project, we need some icons for that I am using “fontawesome 4.7” Icon’s CDN. here is the CDN with link tag, copy and paste it inside the head tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
After adding CDN code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
<title>JavaScript add rows to the table dynamically</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>Here is the basic HTML code to make structure the Table, copy and paste it inside the body tag but before <script> Tag.
HTML Code:
<div class="container">
<table class="_table">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Address</th>
<th width="50px">
<div class="action_container">
<button class="success" onclick="create_tr('table_body')">
<i class="fa fa-plus"></i>
</button>
</div>
</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>
<input type="text" class="form_control" placeholder="Jhon Dhoe">
</td>
<td>
<input type="text" class="form_control" placeholder="+880177x-xxxxxx">
</td>
<td>
<textarea class="form_control" placeholder="Enter Your Address..."></textarea>
</td>
<td>
<div class="action_container">
<button class="danger" onclick="remove_tr(this)">
<i class="fa fa-close"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>Here is the CSS code copy and paste it to your stylesheet.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #efefef;
padding: 25px;
}
.container {
max-width: 900px;
width: 100%;
background-color: #fff;
margin: auto;
padding: 15px;
box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;
border-radius: 5px;
overflow-x: auto;
}
._table {
width: 100%;
border-collapse: collapse;
}
._table :is(th, td) {
border: 1px solid #0002;
padding: 8px 10px;
}
/* form field design start */
.form_control {
border: 1px solid #0002;
background-color: transparent;
outline: none;
padding: 8px 12px;
font-family: 1.2rem;
width: 100%;
color: #333;
font-family: Arial, Helvetica, sans-serif;
transition: 0.3s ease-in-out;
}
.form_control::placeholder {
color: inherit;
opacity: 0.5;
}
.form_control:is(:focus, :hover) {
box-shadow: inset 0 1px 6px #0002;
}
/* form field design end */
.success {
background-color: #24b96f !important;
}
.warning {
background-color: #ebba33 !important;
}
.primary {
background-color: #259dff !important;
}
.secondery {
background-color: #00bcd4 !important;
}
.danger {
background-color: #ff5722 !important;
}
.action_container {
display: inline-flex;
}
.action_container>* {
border: none;
outline: none;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 8px 14px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.action_container>*+* {
border-left: 1px solid #fff5;
}
.action_container>*:hover {
filter: hue-rotate(-20deg) brightness(0.97);
transform: scale(1.05);
border-color: transparent;
box-shadow: 0 2px 10px #0004;
border-radius: 2px;
}
.action_container>*:active {
transition: unset;
transform: scale(.95);
}Now our design is ready for “JavaScript add rows to the table dynamically”, now we need to interact with this table, and we need some JavaScript code, you don’t need to write JS, paste the JS Code from below inside the js file.
function create_tr(table_id) {
let table_body = document.getElementById(table_id),
first_tr = table_body.firstElementChild
tr_clone = first_tr.cloneNode(true);
table_body.append(tr_clone);
clean_first_tr(table_body.firstElementChild);
}
function clean_first_tr(firstTr) {
let children = firstTr.children;
children = Array.isArray(children) ? children : Object.values(children);
children.forEach(x=>{
if(x !== firstTr.lastElementChild)
{
x.firstElementChild.value = '';
}
});
}
function remove_tr(This) {
if(This.closest('tbody').childElementCount == 1)
{
alert("You Don't have Permission to Delete This ?");
}else{
This.closest('tr').remove();
}
}Now this component is ready to use, and thank you so much to read this article.
Our Free Online Tools: https://imageoptimize.help/
Now see the live preview of this Dynamic table component in code pen:
Leave a Reply