用DOM控制表格

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>
View Code

 

posted @ 2019-05-21 16:38  莒州豪侠  阅读(166)  评论(0)  编辑  收藏  举报