<table cellpadding="0" cellspacing="0" border="1">
<caption>英雄列表</caption>
<th>
<input type="checkbox" name="" id="chkAll" value="" />
全选
</th>
<th>英雄名字</th>
<th>所属势力</th>
<th>所在地</th>
<th>操作</th>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="clearfix">
<div id="delAll">
全部删除
</div>
<div id="addNew">
添加新成员
</div>
</td>
</tr>
</tfoot>
</table>
* {
margin: 0;
padding: 0;
}
table {
margin: auto;
border-collapse: collapse;
}
th {
background-color: #F0F0F0;
width: 150px;
height: 42px;
}
td {
width: 150px;
height: 42px;
text-align: center;
line-height: 42px;
}
tr td:last-child {
position: relative;
}
#addNew {
width: 200px;
height: 100%;
float: right;
background-color: #1E90FF;
}
#delAll {
width: 150px;
height: 100%;
float: left;
background-color: #1E90FF;
}
img {
width: 30px;
height: 30px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
input[type=text] {
width: 140px;
height: 25px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
data = [{
name: "刘备",
power: "蜀",
city: "成都"
},
{
name: "孙权",
power: "吴",
city: "柴桑"
},
{
name: "曹操",
power: "魏",
city: "许都"
}
];
var tbody = document.getElementsByTagName("tbody")[0];
window.onload = function() {
var delAll = document.querySelector("#delAll")
for (var i = 0; i < data.length; i++) {
var tr = createRow(data[i]);
tbody.appendChild(tr);
}
var chks = document.querySelectorAll("input[type=checkbox]");
var chkAll = document.querySelector("#chkAll");
chkAll.onclick = function() {
for (var i = 0; i < chks.length; i++) {
chks[i].checked = this.checked;
}
}
delAll.onclick = function() {
var chked = document.querySelectorAll("tbody :checked");
if (confirm("您确定要删除吗?")) {
for (var i = 0; i < chked.length; i++) {
tbody.removeChild(chked[i].parentNode.parentNode);
}
}
}
var addNew = document.querySelector("#addNew");
addNew.onclick = function() {
var row = document.createElement("tr");
var chkTd = document.createElement("td");
var nameTd = document.createElement("td");
var powerTd = document.createElement("td");
var cityTd = document.createElement("td");
var operateTd = document.createElement("td");
var save = document.createElement("button");
save.innerText = "保存";
var cancel = document.createElement("button");
cancel.innerText = "取消";
operateTd.appendChild(save);
operateTd.appendChild(cancel);
row.appendChild(chkTd);
row.appendChild(nameTd);
row.appendChild(powerTd);
row.appendChild(cityTd);
row.appendChild(operateTd);
nameTd.innerHTML = "<input type='text'/>";
powerTd.innerHTML = "<input type='text'/>";
cityTd.innerHTML = "<input type='text'/>";
tbody.appendChild(row);
save.onclick = function() {
var input = document.querySelectorAll("tbody input[type=text]");
var hero = {
name: input[0].value,
power: input[1].value,
city: input[2].value
}
var newRow = createRow(hero);
tbody.replaceChild(newRow,row);
}
cancel.onclick=function(){
tbody.removeChild(this.parentNode.parentNode);
}
}
}
function createRow(hero) {
var row = document.createElement("tr");
var chkTd = document.createElement("td");
var nameTd = document.createElement("td");
var powerTd = document.createElement("td");
var cityTd = document.createElement("td");
var operateTd = document.createElement("td");
row.appendChild(chkTd);
row.appendChild(nameTd);
row.appendChild(powerTd);
row.appendChild(cityTd);
row.appendChild(operateTd);
chkTd.innerHTML = "<input type='checkbox' />"
nameTd.innerText = hero.name;
powerTd.innerText = hero.power;
cityTd.innerText = hero.city;
var img = document.createElement("img");
img.src = '../image/线性干燥.png';
operateTd.appendChild(img);
img.onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
return row;
}