正文
JavaScript--动态添加元素（纯js书写table并删除数据）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
本文是对上一篇博文的扩展，用js书写表格，并添加和删除数据，详细代码解释见代码页。
对于文中使用的script脚本函数，下载地址如下：https://pan.baidu.com/s/13OFnj7ncOie_X797hBZtyQ
页面效果如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态创建元素（表格）</title>
<script src="common.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 纯JS代码创建表格 -->
<script type="text/javascript">
var body=document.getElementsByTagName('body');
//1.创建盒子作为表格容器,控制表格的位置
var box=document.createElement('div');
body[0].appendChild(box); //2.创建表格,并与box绑定
var table=document.createElement('table');
box.appendChild(table);
//设置表格样式
table.style.width='400px';
table.style.border='1px solid gray';
table.style.borderCollapse='collapse'; //3.创建表头,并与table绑定
var thead=document.createElement('thead');
table.appendChild(thead);
//定义表头的行,与表头绑定
var tr=document.createElement('tr');
thead.appendChild(tr); //4.创建表体,并与table绑定
var tbody=document.createElement('tbody');
table.appendChild(tbody); //建立模拟数据,模拟数据是一个个存在数组中的对象
var dates=[
{name:'李世民',subject:'语文',score:98},
{name:'赵匡胤',subject:'物理',score:99},
{name:'多尔衮',subject:'数学',score:92},
{name:'嬴政',subject:'英语',score:93},
{name:'玄烨',subject:'体育',score:100},
{name:'刘彻',subject:'地理',score:94},
{name:'刘邦',subject:'历史',score:97},
{name:'曹操',subject:'音乐',score:91},
{name:'刘备',subject:'政治',score:100},
{name:'孙权',subject:'化学',score:90}
]; //建立表头数据,在数组中存放
var headDates=['姓名','科目','成绩','操作']; //5.表头数据的添加
for(var i=0;i<headDates.length;i++){
//定义表头行的列
var td=document.createElement('td');
td.style.border='1px solid gray';
td.style.textAlign='center';
td.style.backgroundColor='lightgray';
td.style.height='40px';
tr.appendChild(td);
//设置表头行中列的内容
setInnerText(td,headDates[i]);
} //6.表体数据的添加
for(var i=0;i<dates.length;i++ ){
var date=dates[i];
//创建表体数据的行与表体绑定
var tr=document.createElement('tr');
tbody.appendChild(tr);
for(var key in date){
//创建表体行中的列
var td=document.createElement('td');
td.style.border='1px solid gray';
td.style.textAlign='center';
tr.appendChild(td);
setInnerText(td,date[key]);
}
//创建删除列
var link=document.createElement('a');
link.href='javascript:void(0)';
setInnerText(link,'删除');
var td=document.createElement('td');
td.style.border='1px solid gray';
td.appendChild(link);
td.style.textAlign='center';
tr.appendChild(td);
//给删除列注册事件
link.onclick=deleteData;
} function deleteData(){
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
return;
}
</script>
</body>
</html>
