js dynamically generates tables (node operations)

This article example shares the specific code of js dynamically generating a table for your reference. The specific content is as follows

For DOM node operations, the effect diagram of this case is as follows (the amount of code is not large, so there is no separation of structure and behavior):

Native js implementation (the method is explained in the comments):

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 table {
 width: 500px;
 margin: 100px auto;
 border-collapse: collapse;
 text-align: center;
 }

 td,
 th {
 border: 1px solid #333;
 }

 thead tr {
 height: 40px;
 background-color: #ccc;
 }
 </style>
 </head>
 <body>
 <table cellspacing="0">
 <thead>
 <tr>
  <th>Name</th>
  <th>Subject</th>
  <th>Results</th>
  <th>Operation</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>
 </body>
 <script type="text/javascript">
 //Because the student data in it is dynamic, we need js to dynamically generate it. Here we need to simulate the data and define the data ourselves. //We store the data in the form of objects. //1 Prepare the student data first. //2 All the data is put into tbody (how many people, how many rows)
 var datas = [{
 name: 'Liu Shuxin',
 subject: 'JavaScript',
 score: '100'
 }, {
 name: 'Song Xianglong',
 subject: 'JavaScript',
 score: '80'
 },
 {
 name: 'Cui Jian',
 subject: 'JavaScript',
 score: '90'
 },
 {
 name: 'Qie Haimiao',
 subject: 'JavaScript',
 score: '70'
 }
 ];
 //console.log(datas.length);
 var tbody = document.querySelector('tbody');
 for (var i = 0; i < datas.length; i++) {
 //Create a row trs = document.createElement('tr');
 tbody.appendChild(trs);
 //The number of cells td created depends on the number of attributes in each object for(var k in datas[i]){
 //Create a cell var td = document.createElement('td');
 //Give the attribute value in the object to td
 //console.log(datas[i][k]);
 td.innerHTML=datas[i][k];
 trs.appendChild(td);
 }
 
 //Create operation to delete cell var td = document.createElement('td');
 td.innerHTML='<a href="javascript:;" rel="external nofollow" >Delete</a>'
 trs.appendChild(td);
 }
 //Delete operation var a=document.querySelectorAll('a');
 for(var i=0;i<a.length;i++){
 a[i].onclick=function(){
 tbody.removeChild(this.parentNode.parentNode);
 }
 }
 </script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to generate dynamic tables in js and add click events to each cell
Analysis of JS's method of dynamically generating HTML tables
JS dynamically generates tables and submits table data to the backend
How to use JS to dynamically generate a table with any number of rows and columns on a web page
js dynamically generates a table with a specified number of rows
A function implemented in js to automatically generate a table based on the content
Automatically generate tables based on JavaScript code
Use js+xml to automatically generate tables
Use a button to trigger Javascript to dynamically generate a table code
Nodejs obtains network data and generates Excel tables

<<: Introduction and usage examples of ref and $refs in Vue

>>: Detailed explanation of template tag usage (including summary of usage in Vue)