Add rows to javascript table

In web development, tables are a common element. Tables can be used to display data, perform data analysis and visualization, etc. When the data changes dynamically, we may need to continuously add new rows of data to the table. In JavaScript, we can dynamically add table rows in the following ways.

Preparation

Before we start writing the JavaScript code to add table rows, we need to define the basic structure of the table in the HTML file. For example:

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

In this example, we define a table containing two table rows and assign it an id attribute to get the corresponding data in JavaScript. Table element.

Add table rows through DOM operations

We can add table rows through DOM operations. Specifically, we need to get the table element first, then create a table row element, and add the row to the tbody element of the table.

// 获取表格元素
const table = document.getElementById('myTable');

// 创建新的表格行
const newRow = document.createElement('tr');

// 创建新的表格单元格并添加文本内容
const nameCell = document.createElement('td');
nameCell.textContent = 'Tom';
newRow.appendChild(nameCell);

const ageCell = document.createElement('td');
ageCell.textContent = '35';
newRow.appendChild(ageCell);

const cityCell = document.createElement('td');
cityCell.textContent = 'Chicago';
newRow.appendChild(cityCell);

// 将新的行添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.appendChild(newRow);

In this example, we first obtain the table element with the ID myTable, then create a new table row element, and add the text content. Finally, we get the tbody element of the table and add the new table row to it.

Use innerHTML to add table rows

In addition to adding table rows through DOM operations, you can also use the innerHTML attribute to quickly add a row of table data. Specifically, we can write the new table row data into an HTML string, and then assign the string to the innerHTML attribute of the table.

// 获取表格元素
const table = document.getElementById('myTable');

// 定义新的表格行HTML字符串
const newRowHtml = '<tr><td>Tom</td><td>35</td><td>Chicago</td></tr>';

// 将HTML字符串添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.innerHTML += newRowHtml;

In this example, we first obtain the table element with the ID myTable, and then define a new table row HTML string. Finally, we get the tbody element of the table and add the HTML strings of the table rows to it.

Conclusion

In JavaScript, we can add table rows through DOM operations or innerHTML attributes. In actual development, we should choose to use one of these methods according to the specific situation. No matter which method is used, we need to obtain the table elements first and ensure that the HTML structure and data format of the table are correct. By regularly checking the structure and data of your tables, you can avoid errors in your code and data errors.

The above is the detailed content of Add rows to javascript table. For more information, please follow other related articles on the PHP Chinese website!