html dom建立表格
阿新 • • 發佈：2018-12-26
<!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>