Scribd
Upload
10 views

Add and Delete Rows of A Table On Button Clicks - Javatpoint

The document describes how to dynamically add and delete rows from an HTML table using JavaScript. It includes the HTML, CSS, and JavaScript needed to create a table with buttons to add and remove rows. When the add button is clicked, a new row is inserted into the table. When the delete button is clicked, any rows with a checked checkbox are removed from the table.

Uploaded by

Raju D Puthusserry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Add and Delete Rows of A Table On Button Clicks - Javatpoint

The document describes how to dynamically add and delete rows from an HTML table using JavaScript. It includes the HTML, CSS, and JavaScript needed to create a table with buttons to add and remove rows. When the add button is clicked, a new row is inserted into the table. When the delete button is clicked, any rows with a checked checkbox are removed from the table.

Uploaded by

Raju D Puthusserry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.

com/add-and-delete-rows-of-a-table-on-button-clicks

Home HTML XHTML CSS JavaScript Bootstrap jQuery PHP XML JSON

1 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

Add and Delete rows of a table on button clicks


Generally, we create a table and a button in HTML and then we provide the functionality to the button using JavaScript. But, if
we want to create a dynamic table, one that we can alter the number of rows on clicking a button? This tutorial showcases one
method of doing this.

Goal: We are going to create a table and two buttons. The first column of the table will have checkboxes. The first button is to
add rows and the second button is to delete the checked rows.

The HTML part:

1. Create a table

2. Set the type of the cells in the first column as checkbox

3. Set the headings

4. Create two buttons-Add new row and Delete selected rows

Here is the code:

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<h1>Dynamic Table</h1>
<table id = "mytable">
<tr><th></th><th>Roll Number</th><th>Name</th></tr>
<tr><td><input type=checkbox></td><td><input></td><td><input></td></tr>
</table>
<br>
<input type = button class = "b" value = "Add new row" onclick = row()>
<input type = button class = "b" value = "Delete selected rows" onclick = del()>
</body>
</html>

Output:

2 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

CSS part:

There is no particular need of CSS for this functionality but let us give a look to the table using borders and a color touch using
some properties.

Code:

<style>
table, tr, th, td
{
table-layout: fixed;
border: 1px solid black;
border-collapse: separate;

3 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

}
table{
border-spacing: 3px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
th{
background-color: black;
color: white;
}
.b{
padding: 2px 15px;
border-radius: 10px;
}
.b:active{
transform: scale(0.98);
}
.b:hover{
background-color: black;
color: white;
}
</style>

Properties used:

Table styling:

Property Explanation

table_layout: The layout of all the cells in the table remains fixed (Width of the columns) irrespective of the length of
fixed content inside.

border-spacing: Distance or space between the borders of cells. It applies only when border-collapse is set to separate. We
10px can set both vertical and horizontal distances.

box-shadow To attach a shadow to an element. We can add multiple shadows to a single element by separating them
by a comma.

border-radius To curve the edge of the element's corners. (To add rounded corners to an element). The greater the value,
rounder the corner will be. We can give four values to four corners.

background- The color to the background of an element. We can give the name of the color or use hexadecimal codes.
color

border One property for adding the width, style and color to the borders of an element.

Button:

4 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

Property Explanation

padding To create space between the element and the border around it. Using padding-top, padding-right, padding-
bottom and padding-left, we can give spaces on each side of the element.

border-radius To curve the edge of the element's corners. (To add rounded corners to an element). The greater the value,
rounder the corner will be. We can give four values to four corners.

hover: Using element:hover, we can add a property to the element when user hovers (moves) the cursor on the
background- element. Here, we are changing the background color.
color

color Font color.

active: tranform Using element:active, we can add a property to the element when user clicks on the element. Transform is
used to add 2D effects to the elements. Here, we are using scale(). This function can resize the element and
then back to the original size. We used this to get a button effect when pressed.

Output:

JavaScript part:

It is time for the actual functionality. We need to write two functions let us say row() and del() for the two buttons-Add new row and
Delete selected rows.

Code:

5 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

<script>
function row()
{
var mytable = document.getElementById("mytable");
var rows = mytable.rows.length;
var r = mytable.insertRow(rows);
var c1 = r.insertCell(0);
var c2 = r.insertCell(1);
var c3 = r.insertCell(2);
var checkbox = document.createElement("input");
var roll = document.createElement("input");
var name = document.createElement("input");
checkbox.type = "checkbox";
roll.type = "number";
name.type = "text";
c1.appendChild(checkbox);
c2.appendChild(roll);
c3.appendChild(name);
}
function del()
{
var mytable = document.getElementById("mytable");
var rows = mytable.rows.length;
for(var i = rows - 1; i > 0; i--)
{
if(mytable.rows[i].cells[0].children[0].checked)
{
mytable.deleteRow(i);
}
}
}
</script>

Functions and properties used:

6 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

Function/ Property Use

Table.rows.length To get the number of rows of the table

Table.insertRow(index) To insert a row at the specified index

Row.insertCell(column) To insert a cell in the specified row

document.createElement("input") To create a HTML element, in this case an input field.

checkbox.type = "" To declare the data allowed into the element. In this case, checkbox for input field.

c1.appendChild(checkbox) To set the created element into the table cell.

Table.rows[i].cells[0].children[0].checked To check if the checkbox is selected or not.

Table.deleteRow(i) To delete the row given an index.

Mechanism:

First, we access the table using the id "mytable". Then, we get the number of existing rows in the table using the rows.length property.
We then insert a new row at the end index of the table. We use c1, c2 and c3 to create three cells. We need the first cell to be a checkbox
and the next two to be text. Hence, we create HTML elements using createElement("input"), set the type required and then set it inside
the cells. This sis the first function and in the second function we simply access the input field (checkbox) in the first cell of every row in
the table then delete the row if the checkbox is selected.

Output:

0:00 / 0:46

7 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

← Prev Next →

For Videos Join Our Youtube Channel: Join Now

Feedback

◦ Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk SPSS Swagger Transact-SQL Tumblr ReactJS

8 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

Preparation

Regex
Aptitude Reinforcement
Logical R Programming
Verbal Ability RxJS
Interview React Native
Company Python Design
Aptitude Learning
Reasoning Verbal Ability Questions Interview Patterns
Reasoning Interview Questions Questions
Company Questions
Python Pillow Python Turtle Keras tutorial
tutorial tutorial Keras
Python Pillow Python Turtle

Trending Technologies

Artificial AWS Tutorial Selenium tutorial Cloud Computing Hadoop tutorial ReactJS Tutorial
Intelligence AWS Selenium Cloud Computing Hadoop ReactJS
Artificial
Intelligence

Data Science Angular 7 Tutorial Blockchain Git Tutorial Machine Learning DevOps Tutorial
Tutorial Angular 7 Tutorial Git Tutorial DevOps
Data Science Blockchain Machine Learning

B.Tech / MCA

DBMS tutorial Data Structures DAA tutorial Operating System Computer Compiler Design
DBMS tutorial DAA Operating System Network tutorial tutorial
Data Structures Computer Network Compiler Design

Computer Discrete Ethical Hacking Computer Software html tutorial


Organization and Mathematics Ethical Hacking Graphics Tutorial Engineering Web Technology
Architecture Tutorial Computer Graphics Software
Computer Discrete Engineering
Organization Mathematics

9 of 10 31-01-2024, 12:06 am
Add and Delete rows of a table on button clicks - javatpoint https://www.javatpoint.com/add-and-delete-rows-of-a-table-on-button-clicks

Cyber Security Automata Tutorial C Language C++ tutorial Java tutorial .Net Framework
tutorial Automata tutorial C++ Java tutorial
Cyber Security C Programming .Net

Python tutorial List of Programs Control Systems Data Mining Data Warehouse
Python Programs tutorial Tutorial Tutorial
Control System Data Mining Data Warehouse

10 of 10 31-01-2024, 12:06 am

You might also like