Scribd
Upload
3 views2 pages

Handling Tables in DOM

The document explains how to manipulate HTML tables using the Document Object Model (DOM) with JavaScript. It covers accessing tables, inserting and deleting rows and cells, updating content, and applying styles dynamically. DOM table manipulation is crucial for creating interactive and responsive web applications that handle structured data efficiently.

Uploaded by

mayikissyou2358
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

Handling Tables in DOM

The document explains how to manipulate HTML tables using the Document Object Model (DOM) with JavaScript. It covers accessing tables, inserting and deleting rows and cells, updating content, and applying styles dynamically. DOM table manipulation is crucial for creating interactive and responsive web applications that handle structured data efficiently.

Uploaded by

mayikissyou2358
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Handling Tables in DOM

1. Introduction

Tables are widely used in HTML to display structured data. The Document Object Model (DOM) provides
a set of methods and properties that allow developers to create, modify, and remove rows, columns,
and cells dynamically using JavaScript.

DOM-based table manipulation is essential for:

- Displaying data fetched from a database

- Updating tables based on user input

- Creating dynamic reports, dashboards, or forms

2. Accessing a Table

To work with a table in the DOM, you must first access it:

var table = document.getElementById("myTable");

3. Inserting Rows and Cells

A. Insert a New Row

var row = table.insertRow(); // Inserts at the end

var row = table.insertRow(1); // Inserts at position 1 (second row)

B. Insert Cells into a Row

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

cell1.innerHTML = "Name";

cell2.innerHTML = "Age";

4. Updating Table Content

You can modify existing cells using:

table.rows[1].cells[0].innerHTML = "Updated Name";

5. Deleting Rows or Cells

A. Delete a Row

table.deleteRow(1); // Deletes the second row

B. Delete a Cell

table.rows[1].deleteCell(0); // Deletes the first cell of second row

6. Example – Adding a Row Dynamically

<table id="myTable" border="1">


<tr>

<th>Name</th>

<th>Age</th>

</tr>

</table>

<button onclick="addRow()">Add Row</button>

<script>

function addRow() {

var table = document.getElementById("myTable");

var row = table.insertRow();

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

cell1.innerHTML = "John Doe";

cell2.innerHTML = "30";

</script>

7. Styling and Attributes

You can apply styles and attributes dynamically:

row.style.backgroundColor = "lightgray";

cell1.setAttribute("align", "center");

8. Advantages of DOM Table Manipulation

- Makes tables interactive and responsive

- Useful for real-time updates (e.g., live scores, dashboards)

- Eliminates need to reload page

- Enables user-driven interfaces (e.g., forms, data entry)

9. Conclusion

DOM manipulation provides full control over HTML tables, enabling developers to dynamically add,
edit, or delete rows and cells. It’s an essential technique for building modern, interactive web
applications and handling data-rich interfaces efficiently.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy