dynamically add/remove rows in html table using javascript

How to Dynamically Add/Remove Rows in HTML Table Using JavaScript

If you have a large amount of data to display in an HTML table, it's not practical to hard-code all the rows in the HTML code. Instead, you can use JavaScript to dynamically add and remove rows to the table. This makes your code more efficient and easier to maintain.

Adding Rows to HTML Table Using JavaScript

To add a new row to an HTML table using JavaScript, you need to perform the following steps:

1. Get a reference to the table body using the DOM method document.getElementById().
2. Create a new row using the DOM method document.createElement().
3. Create new cells within the row using the DOM method document.createElement().
4. Add content to each cell using the DOM method document.createTextNode().
5. Append the cells to the row using the DOM method row.appendChild().
6. Append the row to the table body using the DOM method tableBody.appendChild().

The following HTML code shows an example table that we will add rows to:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody id="myTableBody">
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

The following JavaScript code adds a new row to the table:

var tableBody = document.getElementById("myTableBody");
var newRow = document.createElement("tr");

var nameCell = document.createElement("td");
var nameText = document.createTextNode("Bob");
nameCell.appendChild(nameText);
newRow.appendChild(nameCell);

var ageCell = document.createElement("td");
var ageText = document.createTextNode("40");
ageCell.appendChild(ageText);
newRow.appendChild(ageCell);

var cityCell = document.createElement("td");
var cityText = document.createTextNode("Chicago");
cityCell.appendChild(cityText);
newRow.appendChild(cityCell);

tableBody.appendChild(newRow);

This code adds a new row to the table with the values "Bob", "40", and "Chicago" in the "Name", "Age", and "City" columns, respectively.

Removing Rows from HTML Table Using JavaScript

To remove a row from an HTML table using JavaScript, you need to perform the following steps:

1. Get a reference to the table body using the DOM method document.getElementById().
2. Get a reference to the row you want to remove using the DOM method tableRow.parentNode.
3. Remove the row from the table using the DOM method tableBody.removeChild().

The following JavaScript code removes the first row from the table:

var tableBody = document.getElementById("myTableBody");
var firstRow = tableBody.childNodes[0];
tableBody.removeChild(firstRow);

This code removes the first row from the table.

Conclusion

Dynamically adding and removing rows from an HTML table using JavaScript is a useful technique for displaying large amounts of data in a table. By using JavaScript, you can make your code more efficient and easier to maintain. Remember to use the DOM methods document.createElement(), document.createTextNode(), element.appendChild(), and element.removeChild() to create and manipulate the table.