DOM的全称是Document Object Model,即文档对象模型,它是网站内容与JavaScript互通的接口。在DOM中,所有的HTML元素、属性和文本都被看成是对象,DOM提供了访问这些对象的方法和属性,可以通过创建、添加、修改和删除页面上的任意元素来重新构建页面。
1、动态添加表格
利用JavaScript来动态创建表格有两种方式:appendChild();insertRow()和insertCell()
(1)appendChild()方法
var trNode = document.createElement("tr"); var tdNode = document.createElement("td"); var textNode = document.createTextNode("新添加的行"); tdNode.appendChild(textNode); trNode.appendChild(tdNode); document.getElementById(‘score‘).appendChild(trNode);
2、insertRow()方法和insertCell()方法
var objRow = document.getElementById(‘score‘).insertRow()
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>表格的基本标签</title> <style type="text/css"> /*table{*/ /*color: #000066;*/ /*background-color: #999999;*/ /*font-family: "宋体";*/ /*}*/ /*caption{*/ /*font-size: 16px;*/ /*font-weight: bolder;*/ /*}*/ /*th{*/ /*color: #000033;*/ /*background-color: #9900cc;*/ /*}*/ table{ align-self: center; text-align: center; color: #000066; background-color: #999999; font-family: "宋体"; border-collapse: separate; border-spacing: 5pt; border-top: 5px solid red; border-left: 5px solid red; border-right: 5px dashed black; border-bottom: 5px dashed blue; } th{ align-content: center; text-align: center; color: #000033; background-color: #9900cc; border: outset 5pt; } caption{ font-size: 16px; font-weight: bolder; } </style> <script type="text/javascript"; language="JavaScript"> function insTable() { var objRow = document.getElementById(‘score‘).insertRow(2); var content = new Array(); content[0] = document.createTextNode(‘赵六‘); content[1] = document.createTextNode(‘55‘); content[2] = document.createTextNode(‘67‘); for (var i=0;i<content.length;i++) { var objCell=objRow.insertCell(i); objCell.appendChild(content[i]); } } </script> </head> <body onload="insTable()"> <table width="200" border="1" summary="该表格显示了学生的语文数学成绩" id="score"> <caption>成绩表</caption> <th>姓名</th> <th>语文</th> <th>数学</th> <tr> <td>张三</td> <td>88</td> <td>90</td> </tr> <tr> <td>李四</td> <td>65</td> <td>82</td> </tr> <tr> <td>王五</td> <td>95</td> <td>78</td> </tr> </table> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。