第一种方法：只显示怎么创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
table th,table td{line-height: 30px;text-align: center;border: 1px solid gray;}
</style>
</head>
<body>
<script type='text/javascript'>
//1.创建表格节点对象
var tab=document.createElement('table');
// 2.创建标题 并添加到表格中
var cap=document.createElement('caption');
cap.innerHTML='员工信息表';
tab.appendChild(cap);
// 3.添加表头
var tr=document.createElement('tr');
var th1=document.createElement('th');
th1.innerHTML='编号';
var th2=document.createElement('th');
th2.innerHTML='姓名';
var th3=document.createElement('th')
th3.innerHTML='年龄';
var th4=document.createElement('th');
th4.innerHTML='操作';
// 将列添加到行内
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
// 将行添加到表格中
tab.appendChild(tr);
// 添加表格内容
var tb_tr1=document.createElement('tr');
var tr1_td1=document.createElement('td');
tr1_td1.innerHTML='1000';
var tr1_td2=document.createElement('td');
tr1_td2.innerHTML='jack';
var tr1_td3=document.createElement('td');
tr1_td3.innerHTML='20';
var tr1_td4=document.createElement('td');
var _link=document.createElement('a');
_link.href='#';
_link.innerHTML='删除';
tr1_td4.appendChild(_link);
//将列添加到行内
tb_tr1.appendChild(tr1_td1);
tb_tr1.appendChild(tr1_td2);
tb_tr1.appendChild(tr1_td3);
tb_tr1.appendChild(tr1_td4);
//将行添加到表格中
tab.appendChild(tb_tr1);
// 将表格添加到页面中
document.body.appendChild(tab);
</script>
</body>
</html>第二种方法：添加、删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{width: 800px;margin: 30px auto;}
table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 30px;}
table th,table td{line-height: 30px;text-align: center;border: 1px solid gray;}
</style>
</head>
<body>
<div id="box">
<label for="">姓名：</label><input type="text" name="" id="txt-name">
<label for="">年龄：</label><input type="text" name="" id="txt-age">
<label for="">住址：</label><input type="text" name="" id="txt-address">
<button id="btnAdd">添加</button>
<script type="text/javascript">
//查找元素
var o=document.getElementById('box');
var oName=document.getElementById('txt-name');
var oAge=document.getElementById('txt-age');
var oAddress=document.getElementById('txt-address');
//创建表格
var tab=document.createElement('table');
//添加标题
var cap=document.createElement('caption');
cap.innerHTML='人员信息表';
tab.appendChild(cap);
//添加表头
var headTr=createTr('姓名','年龄','住址',true);
tab.appendChild(headTr);
//添加点击事件
document.getElementById('btnAdd').οnclick=function(){
//读取输入框内容
var pName=oName.value;
var pAge=oAge.value;
var pAddress=oAddress.value;
if(pName==''||pAge==''||pAddress==''){
alert('姓名、年龄、住址均不能为空');
return;//结束函数
}
//添加行
var tr=createTr(pName,pAge,pAddress,false);
//将行添加到表格中
tab.appendChild(tr);
o.appendChild(tab);//将表格显示到页面中
//清空输入框
oName.value='';
oAddress.value='';
oAge.value='';
};
/*
创建行，，包含四列
ct1,ct2,ct3分别为前三列的内容
*/
function createTr(ct1,ct2,ct3,isTh){
var tr=document.createElement('tr');//创建行
//创建列
var td1=createTd(ct1,isTh);
var td2=createTd(ct2,isTh);
var td3=createTd(ct3,isTh);
var td4=document.createElement('td');
if(!isTh){
var _link=document.createElement('a');//创建超链接
_link.href='#';
_link.innerHTML='删除';
td4.appendChild(_link);
td4.οnclick=function(){
if(confirm('确认删除？')){
this.parentNode.parentNode.removeChild(this.parentNode);
}
};
}else{
td4.innerHTML='操作';
}
//将列添加到行内
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr;
}
//创建列
function createTd(content,isTh){
var td;
//isTh为真，创建th,否则，创建td
if(isTh){
td=document.createElement('th');
}else{
td=document.createElement('td');
}
td.innerHTML=content;
return td;
}
</script>
</div>
</body>
</html>