Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "JavaScript how to dynamically generate a table with row deletion function", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "JavaScript how to dynamically generate a table with row deletion function" this article.

The details are as follows

Dynamically generate a table with delete rows:

Realization idea

1. Get table elements

2. To obtain the data to be filled, you can usually get the data from the database, or you can simulate a group of data for testing. The data is stored in the form of an object, and multiple rows of data can be stored in an array. Each item in the array is an object.

3. ① loops through an array of objects to create rows

② nests a loop-loop traversing the object:

a. Create the required number of cells based on the attribute

b. And assign a value to the cell

c. Then add a cell to the row

③ adds a cell and assigns an a link, text content---"delete", and adds the cell to the line

4. Add line change to tbody

5. Get all the an elements-document.querySelectorAll ('a'), and get an array of objects

6. Loop through the array of an objects, bind the click event to the a link, and add the delete function---tbody.removeChild (th [XSS _ clean] [xss_clean])

The code example dynamically generates the table table {border: 1px solid pink; border-collapse: collapse;} thead {background-color: # ddd } name subject score operation var tbody = document.querySelector ('tbody') Var list = [{'name':' SpongeBob', 'subject':' JavaScript', 'age': 66}, {' name':'do Love Dream', 'subject':' JavaScript', 'age': 99}, {' name': 'SpongeBob' 'subject':' JavaScript', 'age': 60}, {' name': 'Pikachu', 'subject':' JavaScript', 'age': 88}] For (var I = 0; I

< list.length; i++) { // 一、创建行 var tr = document.createElement('tr'); // 二、填充数据 for (var k in list[i]) { console.log(list[i][k]); // 1.创建td单元格 var td = document.createElement('td'); // 单元格填充内容 td[xss_clean] = list[i][k]; // 2.添加单元格 tr.appendChild(td); } // 三、添加删除链接 var td = document.createElement('td'); td[xss_clean] = '删除'; tr.appendChild(td); // 四、添加行 tbody.appendChild(tr); } // 添加删除功能 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { tbody.removeChild(this[xss_clean][xss_clean]); } } console.log(tbody.childNodes); console.log(tbody.children); 页面效果：

The above is all the contents of the article "how to dynamically generate a table with row deletion function in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.