[Example]-Html table javascript add column dynamically with an example

To dynamically add columns to an HTML table using JavaScript, with example columns like Id, Name, Email, and Country Name, you can follow these steps:

1. Create an HTML table with an empty <thead> and <tbody> section. Give the table and its elements appropriate IDs or classes for easier manipulation.
2. Write JavaScript code to add a new column to the table when triggered by an event, such as a button click.
3. Example:

<table id="myTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Country Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>[email protected]</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>[email protected]</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

<button onclick="addColumn()">Add Column</button>

function addColumn() {
  var table = document.getElementById("myTable");
  var header = table.getElementsByTagName("thead")[0].getElementsByTagName("tr")[0];
  var body = table.getElementsByTagName("tbody")[0];
  
  var newColumnHeaders = ["Id", "Name", "Email", "Country Name"];
  
  for (var i = 0; i < newColumnHeaders.length; i++) {
    var newColumnHeader = document.createElement("th");
    var newColumnText = document.createTextNode(newColumnHeaders[i]);
    newColumnHeader.appendChild(newColumnText);
    header.appendChild(newColumnHeader);
  }
  
  for (var j = 0; j < body.rows.length; j++) {
    var newRow = body.rows[j];
    var newCellTexts = ["3", "Maria Garcia", "[email protected]", "Spain"];
    
    for (var k = 0; k < newCellTexts.length; k++) {
      var newCell = newRow.insertCell(-1);
      var newCellText = document.createTextNode(newCellTexts[k]);
      newCell.appendChild(newCellText);
    }
  }
}

In above example, clicking the "Add Column" button triggers the addColumn() function. This function dynamically adds new columns with headers "Id", "Name", "Email", and "Country Name" to the table's header (<thead>) and fills each row in the table body (<tbody>) with corresponding cells in the new columns.

Sometimes, you might need to add a new column to an existing table. If your requirement aligns with this scenario, you can refer to the following code example:

In this example, I have a table to which I am currently dynamically adding rows.Now, I would like to add a new column to the table with the click of a button.

To dynamically add a new column to an existing HTML table, taking an employee data example table, you can follow these steps:

1. Identify the existing HTML table structure containing employee data.
2. Write JavaScript code to add a new column to the table when triggered by an event, such as a button click.
3. Example:

<table id="employeeTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Software Engineer</td>
      <td>$100,000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>Product Manager</td>
      <td>$120,000</td>
    </tr>
  </tbody>
</table>

<button onclick="addColumn()">Add Column</button>

function addColumn() {
  var table = document.getElementById("employeeTable");
  var header = table.getElementsByTagName("thead")[0].getElementsByTagName("tr")[0];
  var body = table.getElementsByTagName("tbody")[0];
  
  var newColumnName = "Department";
  
  // Add new column header to the table header
  var newColumnHeader = document.createElement("th");
  var newColumnText = document.createTextNode(newColumnName);
  newColumnHeader.appendChild(newColumnText);
  header.appendChild(newColumnHeader);
  
  // Add new column data to each row in the table body
  var departmentValues = ["Engineering", "Management"];
  for (var i = 0; i < body.rows.length; i++) {
    var newRowCell = body.rows[i].insertCell(-1);
    var newRowText = document.createTextNode(departmentValues[i]);
    newRowCell.appendChild(newRowText);
  }
}

In this example, clicking the "Add Column" button triggers the addColumn() function. This function dynamically adds a new column titled "Department" to the existing employee data table. Each row in the table body is filled with corresponding department values ("Engineering" and "Management" in this case).

To dynamically create a table in HTML with multiple rows and columns based on user-selected values from dropdown lists, you can follow these steps:

1. Create HTML elements for dropdown lists to select the number of rows and columns.
2. Write JavaScript code to generate a table with the specified number of rows and columns when triggered by an event, such as changing the dropdown selections.
3. Example:

<select id="rowDropdown">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select id="columnDropdown">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<button onclick="createTable()">Create Table</button>

<div id="tableContainer"></div>

function createTable() {
  var rowDropdown = document.getElementById("rowDropdown");
  var columnDropdown = document.getElementById("columnDropdown");
  var numRows = parseInt(rowDropdown.value);
  var numColumns = parseInt(columnDropdown.value);
  
  var tableHtml = "<table>";
  for (var i = 0; i < numRows; i++) {
    tableHtml += "<tr>";
    for (var j = 0; j < numColumns; j++) {
      tableHtml += "<td>Row " + (i + 1) + ", Column " + (j + 1) + "</td>";
    }
    tableHtml += "</tr>";
  }
  tableHtml += "</table>";
  
  var tableContainer = document.getElementById("tableContainer");
  tableContainer.innerHTML = tableHtml;
}

In this example, the user can select the number of rows and columns using dropdown lists. Clicking the "Create Table" button triggers the createTable() function, which generates a table with the specified number of rows and columns. Each cell in the table is populated with content indicating its row and column position.