JavaScript Add Rows To Table Dynamically
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript add rows to table dynamically, the addNewRow() and deleteRow() methods define new rows (records) and existing rows (records) to be added and deleted, respectively.
It is as simple as calling insertRow to add a new row to a table (). A new row will be inserted at the specified index in the table when insertRow() is called.
An element with a tr element must contain one or more th) and <td> elements.
The "insertRow()" method is applied to insert a row just at the beginning of a table.A new tr element is inserted into the table by creating a new tr element.
An index is passed as a parameter, which determines the location of the row in the table. In the case of a method passing "0" or no index, the row will be added at the beginning.
Step By Step Guide On JavaScript Add Rows To Table Dynamically :-
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function () {
var rowIdx = 0;
$('#addBtn').on('click', function () {
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>Row ${rowIdx}</p>
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
$('#tbody').on('click', '.remove', function () {
var child = $(this).closest('tr').nextAll();
child.each(function () {
var id = $(this).attr('id');
var idx = $(this).children('.row-index').children('p');
var dig = parseInt(id.substring(1));
idx.html(`Row ${dig - 1}`);
$(this).attr('id', `R${dig - 1}`);
});
$(this).closest('tr').remove();
rowIdx--;
});
});
</script>
</head>
<body>
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">Row Number</th>
<th class="text-center">Remove Row</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<button class="btn btn-md btn-primary"
id="addBtn" type="button">
Add new Row
</button>
</div>
</body>
</html>
- Writing <HTML>, which informs the browser of the version of HTML we're using, is the first step.Tags are the beginning of HTML documents.
- Using the <head> tag, we will describe the project's heading. There is an open title and an open title/title. It is referred to as a step-by-step style sheet when it contains a full URL or a path relative to the current web page.
- Then we added a <script> tag. The script tag explains javascript google API run and the file we used that or the code.
- Then </script> and </head> script and head close.
- The number of rows is then denoted by the total number.
- Our next step was to add rows to the body.
- Our next step is to get all the rows adjacent to the row containing the clicked button.
- After that, iterating over all the rows obtained to change the index.
- After that, we obtain the row number based on the ID of the table.
- Our next step was to remove the current row.
Conclusion :-
I hope this article on JavaScript add rows to table dynamically helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
