使用JavaScript动态生成表格

稀饭和汤 發表於 2020-1-3 11:39:00

实现描述：
根据数据的多少，实现将数据动态显示在表格内，并实现删除元素的操作：
 
最终实现的效果图：
 
<img src="https://img2018.cnblogs.com/i-beta/1438195/202001/1438195-20200103112137095-201050354.gif" alt="">
 
 
 
表格开始的搭建：
<div class="cnblogs_code">
<pre> 1 <style>
 2 table {
 3 width: 400px;
 4 height: 200px;
 5 margin: 100px auto;
 6 text-align: center;
 7 }
 8
 9 th {
10 border: 1px solid rgb(10, 10, 10);
11 background-color: #ccc;
12 font-size: 18px;
13 }
14
15 tr,
16 td {
17 border: 1px solid #ccc;
18 }
19 </style>
20
21 <body>
22
23 <table cellspacing='0'>
24
25 <thead>
26 <tr>
27 <th>姓名</th>
28 <th>科目</th>
29 <th>成绩</th>
30 <th>操作</th>
31 </tr>
32
33
34 </thead>
35 <tbody>
36
37 </tbody>
38 </table>
39 </body></pre>
</div>
页面的初始效果图：
<img src="https://img2018.cnblogs.com/i-beta/1438195/202001/1438195-20200103112426204-983636692.png" alt="">
 
 
 
动态生成表格实现步骤：
1、由于里面的数据都是动态的，需要使用js动态生成，在这里采用模拟数据，自己 定义好数据，数据采取对象的方式进行存储。
 
创建假数据：
<div class="cnblogs_code">
<pre> //创建假的学生数据
 var datas = [{
 name: '魏璎珞',
 project: 'javascript',
 score: 100

 }, {
 name: '弘历',
 project: 'javascript',
 score: 89

 }, {
 name: '傅恒',
 project: 'javascript',
 score: 79

 }, {
 name: '明玉',
 project: 'javascript',
 score: 70

 }]</pre>
</div>
 
2、所有的数据都放在tbody的行里面
3、由于行很多，需要采取循环创建多个行（对应的就有多少人）
<div class="cnblogs_code">
<pre>var tbody = document.querySelector('tbody');
 for (var i = 0; i < datas.length; i++) {
 //创建行元素
 var tr = document.createElement('tr');
 //在tbody后面添加行tr元素
 tbody.appendChild(tr);

}
}</pre>
</div>
4、行里面有多个单元格，在行里面添加单元格，并显示对象的属性值：
<div class="cnblogs_code">
<pre>for (var k in datas) {
 //创建单元格元素
 var td = document.createElement('td')
 //给单元格元素赋值
 td.innerHTML = datas;
 //添加单元格
 tr.appendChild(td);

 }</pre>
</div>
<pre>datas为对象 </pre>
<pre>datas得到对象的属性值 </pre>
<div class="cnblogs_code">
<pre> 1 var tbody = document.querySelector('tbody');
 2 for (var i = 0; i < datas.length; i++) {
 3 //创建行元素
 4 var tr = document.createElement('tr');
 5 //在tbody后面添加行tr元素
 6 tbody.appendChild(tr);
 7
 8
 9 for (var k in datas) {
10 //创建单元格元素
11 var td = document.createElement('td')
12 //给单元格元素赋值
13 td.innerHTML = datas;
14 //添加单元格
15 tr.appendChild(td);
16
17 }
18
19
20 }</pre>
</div>
显示的得到的效果图：
 
<img src="https://img2018.cnblogs.com/i-beta/1438195/202001/1438195-20200103113150125-348372181.png" alt="">
 
 
<pre>5、在行的末尾添加一个删除的链接： </pre>
<div class="cnblogs_code">
<pre> var td1 = document.createElement('td');
 td1.innerHTML = '<a href="javascript:;">删除</a>';
 tr.appendChild(td1);</pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_93f6642e-a150-4834-ad7d-2b6905388a4f" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_93f6642e-a150-4834-ad7d-2b6905388a4f" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_93f6642e-a150-4834-ad7d-2b6905388a4f" class="cnblogs_code_hide">
<pre> 1//创建假的学生数据
 2 var datas = [{
 3 name: '魏璎珞',
 4 project: 'javascript',
 5 score: 100
 6
 7 }, {
 8 name: '弘历',
 9 project: 'javascript',
10 score: 89
11
12 }, {
13 name: '傅恒',
14 project: 'javascript',
15 score: 79
16
17 }, {
18 name: '明玉',
19 project: 'javascript',
20 score: 70
21
22 }]
23 var tbody = document.querySelector('tbody');
24 for (var i = 0; i < datas.length; i++) {
25 //创建行元素
26 var tr = document.createElement('tr');
27 //在tbody后面添加行tr元素
28 tbody.appendChild(tr);
29
30
31 for (var k in datas) {
32 //创建单元格元素
33 var td = document.createElement('td')
34 //给单元格元素赋值
35 td.innerHTML = datas;
36 //添加单元格
37 tr.appendChild(td);
38
39 }
40 var td1 = document.createElement('td');
41 td1.innerHTML = '<a href="javascript:;">删除</a>';
42 tr.appendChild(td1);
43
44 }</pre>
</div>
以上几步的js代码</div>
<img src="https://img2018.cnblogs.com/i-beta/1438195/202001/1438195-20200103113429496-660520496.png" alt="">
 
 
<pre> </pre>
<pre>6、删除的操作 注意：删除的是删除链接的父级（td）的父级(tr) [this.parentNode.parentNode] 即为tbody中的tr</pre>
<pre>[tbody.removeChild]</pre>
<pre> </pre>
  
<div class="cnblogs_code">
<pre> //删除元素
 var dels = document.querySelectorAll('a');
 for (var i = 0; i < dels.length; i++) {
 //删除的是链接的父亲（td）的父亲(tr)tr的父级tbody
 dels.onclick = function() {
 tbody.removeChild(this.parentNode.parentNode);

 }
}</pre>
</div>
 
动态生成表格的代码：
<div class="cnblogs_code"><img id="code_img_closed_574680a8-8d54-4b3c-9844-fd0c67fc16cf" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_574680a8-8d54-4b3c-9844-fd0c67fc16cf" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_574680a8-8d54-4b3c-9844-fd0c67fc16cf" class="cnblogs_code_hide">
<pre>1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>动态生成表格</title>
9 </head>
 10
 11 <style>
 12 table {
 13 width: 400px;
 14 height: 200px;
 15 margin: 100px auto;
 16 text-align: center;
 17 }
 18
 19 th {
 20 border: 1px solid rgb(10, 10, 10);
 21 background-color: #ccc;
 22 font-size: 18px;
 23 }
 24
 25 tr,
 26 td {
 27 border: 1px solid #ccc;
 28 }
 29 </style>
 30
 31 <body>
 32
 33 <table cellspacing='0'>
 34
 35 <thead>
 36 <tr>
 37 <th>姓名</th>
 38 <th>科目</th>
 39 <th>成绩</th>
 40 <th>操作</th>
 41 </tr>
 42
 43
 44 </thead>
 45 <tbody>
 46
 47 </tbody>
 48 </table>
 49
 50 <script>
 51 //创建假的学生数据
 52 var datas = [{
 53 name: '魏璎珞',
 54 project: 'javascript',
 55 score: 100
 56
 57 }, {
 58 name: '弘历',
 59 project: 'javascript',
 60 score: 89
 61
 62 }, {
 63 name: '傅恒',
 64 project: 'javascript',
 65 score: 79
 66
 67 }, {
 68 name: '明玉',
 69 project: 'javascript',
 70 score: 70
 71
 72 }]
 73 var tbody = document.querySelector('tbody');
 74 for (var i = 0; i < datas.length; i++) {
 75 //创建行元素
 76 var tr = document.createElement('tr');
 77 //在tbody后面添加行tr元素
 78 tbody.appendChild(tr);
 79
 80
 81 for (var k in datas) {
 82 //创建单元格元素
 83 var td = document.createElement('td')
 84 //给单元格元素赋值
 85 td.innerHTML = datas;
 86 //添加单元格
 87 tr.appendChild(td);
 88
 89 }
 90 var td1 = document.createElement('td');
 91 td1.innerHTML = '<a href="javascript:;">删除</a>';
 92 tr.appendChild(td1);
 93
 94 }
 95
 96 //删除元素
 97 var dels = document.querySelectorAll('a');
 98 for (var i = 0; i < dels.length; i++) {
 99 //删除的是链接的父亲（td）的父亲(tr)tr的父级tbody
100 dels.onclick = function() {
101 tbody.removeChild(this.parentNode.parentNode);
102
103 }
104
105 }
106 </script>
107
108 </body>
109
110 </html></pre>
</div>
动态生成表格</div> 
来源：https://www.cnblogs.com/jiguiyan/p/12144110.html

頁: [1]

琼殿技术论坛's Archiver

使用JavaScript动态生成表格