|
JavaScript动态生成表格，综合了dom操作创建元素，添加元素，赋值，删除元素操作。
js动态生成表格案例
代码如下：
- <body>
- <style>
- table,
- tr,
- td,
- th,
- thead,
- tbody {
- border: 1px solid rgb(8, 8, 8);
- }
-
- thead {
- background-color: pink;
- }
-
- td {
- width: 100px;
- }
-
- tr {
- text-align: center;
- }
- </style>
- <table cellspacing="0" align="center">
- <thead>
- <tr>
- <th>姓名</th>
- <th>科目</th>
- <th>成绩</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
- <script>
- var datas = [{
- name: '蚂蚁',
- subject: 'javascript',
- score: 100
- }, {
- name: '自丢网',
- subject: 'javascript',
- score: 100
- }, {
- name: '教程网',
- subject: 'javascript',
- score: 99
- }, {
- name: '模板网',
- subject: 'javascript',
- score: 88
- }];
- var tbody = document.querySelector('tbody');
- for (i = 0; i < datas.length; i++) {
- var tr = document.createElement('tr');
- tbody.appendChild(tr);
- for (var k in datas[i]) {
- var td = document.createElement('td');
- td.innerHTML = datas[i][k];
- tr.appendChild(td);
- }
- var td = document.createElement('td');
- td.innerHTML = '<a href="javascript:;">删除</a>';
- tr.appendChild(td);
- var as = document.querySelectorAll('a');
- for (var j = 0; j < as.length; j++) {
- as[j].onclick = function() {
- tbody.removeChild(this.parentNode.parentNode);
- }
- }
- }
- </script>
- </body>
|
|
