How to add or remove rows dynamically to HTML Table in Java Script
Introduction:
In this article i will explain how to Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table in Java Script.
Description:
In previous articles i explained How to replace string in SQL Server, How to replace string in C#, How to replace string in Java Script, How many ways we can replace the string in Java Script, How to work with TextBox in Java Script and How to create a HTML Table dynamically in Java Script. Now i will explain how to Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table in Java Script.
This article includes the following:
- Create/Insert rows dynamically to HTML Table
- Remove/Delete rows from HTML Table
Before reading this article please read How to Create HTML Table dynamically in Java Script.
Now create a table as shown below.
<div>
<table border="0" cellpadding="0" cellspacing="0" class="article">
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
Col3
</th>
<th style="width: 160px;">
Add
</th>
</tr>
<tr>
<td>
Col1
</td>
<td>
Col2
</td>
<td>
Col3
</td>
<td>
<input type="button" value="Add Row" onclick="AddRow(this)" />
</td>
</tr>
</table>
</div>
Write a script for AddRow() function as shown below.
function AddRow(sender) {
// Get current row index.
var rowIndex = sender.parentNode.parentNode.rowIndex + 1;
// Get current table.
var table = sender.parentNode.parentNode.parentNode.parentNode;
// Create a new row.
var row = table.insertRow(rowIndex);
// Create Col1.
var col1 = row.insertCell(0);
col1.innerHTML = 'Col1';
// Create Col2.
var col2 = row.insertCell(1);
col2.innerHTML = 'Col2';
// Create Col3.
var col3 = row.insertCell(2);
col3.innerHTML = 'Col3';
// Create Col4.
var col4 = row.insertCell(3);
col4.innerHTML = '<input type="button" value="Add Row" onclick="AddRow(this)" /><input type="button" value="Delete Row" onclick="DeleteRow(this)" />';
}
When a new row is created then two buttons will be added to it. One is Add Row button and Delete Row button.
Now write a script for DeleteRow() function as shown below.
function DeleteRow(sender) {
var table = sender.parentNode.parentNode.parentNode.parentNode;
table.deleteRow(sender.parentNode.parentNode.rowIndex);
}
Full Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptAddRowsDynamically.aspx.cs"
Inherits="JavaScriptAddRowsDynamically" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Rows Dynamically in Java script</title>
<style type="text/css">
.article { width: 600px; border: 1px solid #DFDFDF; background-color: #F9F9F9; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: Arial, "Bitstream Vera Sans" ,Helvetica,Verdana,sans-serif; color: #333; margin-top: 3px; }
.article td, .article th { border-top-color: white; border-bottom: 1px solid #DFDFDF; color: #555; }
.article th { text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px; font-family: Arial, "Bitstream Vera Sans" ,Helvetica,Verdana,sans-serif; font-weight: bold; padding: 7px 7px 8px; text-align: left; line-height: 1.3em; font-size: 12px; background: #E3F2D4; border-right: 1px solid #DFDFDF; }
.article td { font-size: 12px; padding: 7px 7px 8px; vertical-align: top; border-right: 1px solid #DFDFDF; }
</style>
<script type="text/javascript">
function AddRow(sender) {
// Get current row index.
var rowIndex = sender.parentNode.parentNode.rowIndex + 1;
// Get current table.
var table = sender.parentNode.parentNode.parentNode.parentNode;
// Create a new row.
var row = table.insertRow(rowIndex);
// Create Col1.
var col1 = row.insertCell(0);
col1.innerHTML = 'Col1';
// Create Col2.
var col2 = row.insertCell(1);
col2.innerHTML = 'Col2';
// Create Col3.
var col3 = row.insertCell(2);
col3.innerHTML = 'Col3';
// Create Col4.
var col4 = row.insertCell(3);
col4.innerHTML = '<input type="button" value="Add Row" onclick="AddRow(this)" /><input type="button" value="Delete Row" onclick="DeleteRow(this)" />';
}
function DeleteRow(sender) {
var table = sender.parentNode.parentNode.parentNode.parentNode;
table.deleteRow(sender.parentNode.parentNode.rowIndex);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" class="article">
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
Col3
</th>
<th style="width: 160px;">
Add
</th>
</tr>
<tr>
<td>
Col1
</td>
<td>
Col2
</td>
<td>
Col3
</td>
<td>
<input type="button" value="Add Row" onclick="AddRow(this)" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Output:
After loading.
Five rows added.
4 rows deleted.
-
CreatedMar 21, 2014
-
UpdatedOct 03, 2020
-
Views3,716