首先设置好表格的表头,并为表格及列表设置id。
<div id="dv">
<table id="tb">
<caption>英雄列表</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>定位</td>
<td>操作</td>
</tr>
</table>
</div>
接着给表格设置CSS样式属性
#tb{
width: 40%;
border: solid 1px cornflowerblue;
margin: 10px auto;
}
td{
border: solid 1px cornflowerblue;
}
最后编写JavaScript方法
//删除表格中被点击的超链接所在的行
function deleteRow(a){
//设置弹框,确认用户选择
var ok = confirm("确定要删除吗?"); //确认:true 取消:false
if(!ok){
return false; //取消操作
}
var tb = document.getElementById("tb");
var rowIndex = a.parentNode.parentNode.rowIndex;//获取当前删除行的行索引
tb.deleteRow(rowIndex);//调用方法删除指定行索引的行对象
}
//初始化数据表格
function initialTab(){
var tb = document.getElementById("tb");
var hero = [
{'name':'亚索','gender':'男','occupation':'战士'},
{'name':'卡兹克','gender':'男','occupation':'刺客'},
{'name':'泽拉斯','gender':'男','occupation':'法师'},
{'name':'索拉卡','gender':'女','occupation':'辅助'}
];
//增强for循环
for(var i in hero){
var row = tb.rows[0].cloneNode(true);//深度复制tr对象
row.cells[0].innerHTML = hero[i].name;
row.cells[1].innerHTML = hero[i].gender;
row.cells[2].innerHTML = hero[i].occupation;
row.cells[3].innerHTML = "<a href = '#' onclick='deleteRow(this)'>删除</a>";
tb.appendChild(row); //在表格中添加复制的新行
}
}
//页面加载
window.onload = function(){
initialTab();
};
执行结果如下:
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>英雄列表</title>
</head>
<style type="text/css">
#tb{
width: 40%;
border: solid 1px cornflowerblue;
margin: 10px auto;
}
td{
border: solid 1px cornflowerblue;
}
</style>
<script type="text/javascript">
//删除表格中被点击的超链接所在的行
function deleteRow(a){
//设置弹框,确认用户选择
var ok = confirm("确定要删除吗?"); //确认:true 取消:false
if(!ok){
return false; //取消操作
}
var tb = document.getElementById("tb");
var rowIndex = a.parentNode.parentNode.rowIndex;//获取当前删除行的行索引
tb.deleteRow(rowIndex);//调用方法删除指定行索引的行对象
}
//初始化数据表格
function initialTab(){
var tb = document.getElementById("tb");
var hero = [
{'name':'亚索','gender':'男','occupation':'战士'},
{'name':'卡兹克','gender':'男','occupation':'刺客'},
{'name':'泽拉斯','gender':'男','occupation':'法师'},
{'name':'索拉卡','gender':'女','occupation':'辅助'}
];
//增强for循环
for(var i in hero){
var row = tb.rows[0].cloneNode(true);//深度复制tr对象
row.cells[0].innerHTML = hero[i].name;
row.cells[1].innerHTML = hero[i].gender;
row.cells[2].innerHTML = hero[i].occupation;
row.cells[3].innerHTML = "<a href = '#' onclick='deleteRow(this)'>删除</a>";
tb.appendChild(row); //在表格中添加复制的新行
}
}
//页面加载
window.onload = function(){
initialTab();
};
</script>
<body>
<div id="dv">
<table id="tb">
<caption>英雄列表</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>定位</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>