createElement()创建元素节点
setAttribute('属性名称','值')设置属性并赋值
insertRow(0)插入行
insertCell(0)插入单元格
appendChile()方法向节点的子节点列表的末尾添加新的节点。
createTextNode()创建文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作表格</title>
<style>
input, .tableContainer-1, .tableContainer-2 { margin: 20px;}
table {text-align: center;}
</style>
<script>
window.onload = function(){
/*
createElement()创建元素节点
setAttribute('属性名称','值')设置属性并赋值
insertRow(0)插入行
insertCell(0)插入单元格
appendChile()方法向节点的子节点列表的末尾添加新的节点。
createTextNode()创建文本节点
DOM创建表格的基本步骤：
1,创建表格节点
2,设置表格属性
3,插入一行tr
4,插入单元格td
5,创建文本text
6,将文本添加到td
7,创建表格节点添加到body
*/
// // 1,创建表格节点
// var tableNode = document.createElement('table');
// // 2,设置表格属性
// tableNode.setAttribute('border','1');
// tableNode.setAttribute('width','100%');
// // 3,插入一行tr
// var trNode = tableNode.insertRow(0);
// // 4,插入单元格td
// var tdNode = trNode.insertCell(0);
// // 5,创建文本text
// var text = document.createTextNode('1');
// // 6,将文本添加到td
// tdNode.appendChild(text);
// // 7,创建表格节点添加到body
// document.body.appendChild(tableNode);
// 循环创建10行10列表格
function createTable1(){
var tableNode = document.getElementsByTagName('table')[0];
if (tableNode != undefined) {
alert('表格已存在');
return false;
};
var tableNode = document.createElement('table');
tableNode.setAttribute('border', '1');
tableNode.setAttribute('width', '500px');
var num = 1;
for (var i = 0; i < 10; i++) {
var trNode = tableNode.insertRow(i);
for (var j = 0; j < 10; j++) {
var tdNode = trNode.insertCell(j);
var txt = document.createTextNode(num++);
tdNode.appendChild(txt);
};
};
document.getElementsByTagName('div')[0].appendChild(tableNode);
}
// 使用innerHTML创建表格
function createTable2(){
var tableNode = document.getElementsByTagName('table')[0];
if (tableNode != undefined) {
alert('表格已存在');
return false;
};
var num=1;
var tableHTML = '<table border=1 style="500px">';
for(var i=0; i<10; i++){
tableHTML+='<tr>';
for(var j=0; j<10; j++){
tableHTML+='<td>';
tableHTML+=(num++);
tableHTML+='</td>';
}
tableHTML+='</tr>';
}
tableHTML+='</table>';
document.getElementsByTagName('div')[1].innerHTML = tableHTML;
}
function deleteROW(){
var tableNode = document.getElementsByTagName('table')[0];
if (tableNode == undefined) {
alert('请点击左边按钮创建表格后再删除!')
}else if(tableNode.rows.length==0) {
tableNode.parentNode.removeChild(tableNode);
}else{
tableNode.deleteRow(0);
}
}
document.getElementsByTagName('input')[0].onclick = function(){
createTable1();
};
document.getElementsByTagName('input')[1].onclick = function(){
createTable2();
};
document.getElementsByTagName('input')[2].onclick = function(){
deleteROW();
};
};
</script>
</head>
<body>
<input type="button" value="创建10行10列表格">
<input type="button" value="使用innerHTML创建表格">
<input type="button" value="删除一行表格">
<div class="tableContainer-1"></div>
<div class="tableContainer-2"></div>
</body>
</html>