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:

 
 
 
Name
 
Age
 
City
 
 
 
 
 
John
 
25
 
New York
 
 
 
Jane
 
30
 
Los Angeles
 
 
 

In this example, we define a table containing two table rows and assign it anidattribute 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 thetbodyelement 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 IDmyTable, then create a new table row element, and add the text content. Finally, we get thetbodyelement 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 theinnerHTMLattribute 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 theinnerHTMLattribute of the table.

// 获取表格元素 const table = document.getElementById('myTable'); // 定义新的表格行HTML字符串 const newRowHtml = 'Tom35Chicago'; // 将HTML字符串添加到表格中 const tbody = table.getElementsByTagName('tbody')[0]; tbody.innerHTML += newRowHtml;

In this example, we first obtain the table element with the IDmyTable, and then define a new table row HTML string. Finally, we get thetbodyelement 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 orinnerHTMLattributes. 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!