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

In this article Xiaobian detailed introduction of "javascript how to generate dynamic tables", the content is detailed, the steps are clear, the details are handled properly, I hope this "javascript how to generate dynamic tables" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Case analysis

Because the student data in it is dynamic, we need to generate js dynamically. Here we simulate the data and define the data ourselves. We store data in the form of objects. All the data is put into the rows in the tbody. Because there are so many rows, we need to create multiple rows in a loop (corresponding to how many people).

Code Document table {width: 400px; border-collapse: collapse; margin: 100px auto; border: 1px solid # 888; text-align: center;} th,td {border: 1px solid # 888; padding: 5px 0px } th {background-color: skyblue;} tr:hover {cursor: default; background-color: pink;} a:hover {cursor: pointer } name, subject, score, operation / / dynamically generate a table / / data is the data from the simulated background var data = [ {"name": "I am A Niu" "class": "javascript", "grade": 100}, {"name": "Don't mess with me", "class": "javascript", "grade": 99}, {"name": "I don't know the details" "class": "javascript", "grade": 98}, {"name": "she said inappropriate", "class": "javascript", "grade": 96}, {"name": "the gods have no light" "class": "javascript", "grade": 95}] Var tbody = document.querySelector ('tbody'); for (var item0)

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.