html dom创建表格

来源：互联网发布：淘宝武士刀编辑：程序博客网时间：2024/05/21 18:32
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style  type="text/css">    </style></head><body>    <script type="text/javascript" src="js/write.js"></script>    <script type="text/javascript">        //使用DOM来创建这个表格        function createTable() {            //创建table节点,设置其属性            var table = document.createElement('table');            table.border = 1;            table.width = 300;            //标题一个            var caption = document.createElement('caption');            caption.appendChild(document.createTextNode('人员表'));            table.appendChild(caption);            //页眉一个            var thead = document.createElement('thead');            table.appendChild(thead);            thead.appendChild(document.createTextNode("thead"));            var tr = document.createElement('tr');            thead.appendChild(tr);            var th1 = document.createElement('th');            var th2 = document.createElement('th');            var th3 = document.createElement('th');            tr.appendChild(th1);            th1.appendChild(document.createTextNode('姓名'));            tr.appendChild(th2);            th2.appendChild(document.createTextNode('性别'));            tr.appendChild(th3);            th3.appendChild(document.createTextNode('年龄'));            document.body.appendChild(table);        }        //使用html dom创建        function createTable1() {            //创建table            var table = document.createElement('table');            table.border = 1;            table.width = 300;            table.createCaption().innerHTML = '人员表';            //table.createTHead();            //table.tHead就表示返回thead的引用，但不建议这么做，会混淆            //table.tHead.insertRow(0);            //创建页眉            var thead = table.createTHead();            thead.innerHTML="thead";            var tr = thead.insertRow(0);            var td1 = tr.insertCell(0);            td1.appendChild(document.createTextNode('数据1'));            var td2 = tr.insertCell(1);            td2.appendChild(document.createTextNode('数据2'));            /*或者            var tr = thead.insertRow(0);            tr.insertCell(0).innerHTML = '数据1';            tr.insertCell(1).innerHTML = '数据2';            tr.insertCell(2).innerHTML = '数据3';            */            document.body.appendChild(table);                    }    </script>    <input type="button" onclick="createTable1()" value="创建按钮"/></body></html>
阅读全文
0 0