How to Append Header to a HTML Table in JavaScript ?
JavaScript allows us to dynamically modify the structure of a table based on user interaction or other dynamic events. Here we will use JavaScript to dynamically create a Header row and then append it to the HTML table.
Approach
In this approach, we are using create elements along with DOM manipulation. we will follow these steps:
- Create the HTML table: Set up the basic HTML structure with a table containing existing headers and rows. Add a button element with a unique ID to trigger the header appending functionality.
- Include the Styling: Optionally, apply CSS styles for better presentation. In this example, we have added simple styling to the table and button.
- Set Up JavaScript Event Handling: Use JavaScript to get the table element by its ID. Add an event listener to the button to respond to clicks by DOM manipulation.
- Define the JavaScript Logic for Appending Headers: Inside the event listener function we will use these-
- Create a new header row (
tr
element). - Create individual header cells (
th
elements) with desired text content. - Append the header cells to the header row.
- Append the new header row to the
thead
section of the table.
- Create a new header row (
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width" > < title >Header Appended in HTML table using JS</ title > < style > * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; width: 100%; } table, td, th { border: 2px solid black; padding: 5px; font-size: 15px; font-weight: 800; font-family: sans-serif; } #appendHeaderButton { margin: 5px 80px; background-color: #dfdfdf; padding: 10px 20px; border-radius: 16px; font-size: 10px; font-weight: 600; } </ style > </ head > < body > < table id = "myTable" > < thead > < tr > < th >I Column</ th > < th >II Column</ th > < th >III Column</ th > </ tr > </ thead > < tbody > < tr > < td >cell (1,1)</ td > < td >cell (1,2)</ td > < td >cell (1,3)</ td > </ tr > < tr > < td >cell (2,1)</ td > < td >cell (2,2)</ td > < td >cell (2,3)</ td > </ tr > < tr > < td >cell (3,1)</ td > < td >cell (3,2)</ td > < td >cell (3,3)</ td > </ tr > </ tbody > </ table > <!-- Add a button with an ID for JavaScript to reference --> < button id = "appendHeaderButton" >Append Header</ button > < script > //Get the table by its ID var table = document.getElementById("myTable"); // Add an event listener to the button document.getElementById("appendHeaderButton") .addEventListener("click", function () { // new header row creation let headerRow = document.createElement("tr"); let headerCell1 = document.createElement("th"); headerCell1.textContent = "New Header I"; let headerCell2 = document.createElement("th"); headerCell2.textContent = "New Header II"; let headercell3 = document.createElement("th"); headercell3.textContent = "New Header III"; // Add header cells to the header row headerRow.appendChild(headerCell1); headerRow.appendChild(headerCell2); headerRow.appendChild(headercell3); // Append the new header row to the table. table.getElementsByTagName("thead")[0] .appendChild(headerRow); }); </ script > </ body > </ html > |
Output: