英雄列表

<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);
    }
    //添加点击事件
    //1.全选点击
    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;
        }
    }
    //3.全部删除点击
    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);
            }
        }
    }
    //4.添加新成员点击
    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);
    //2.删除点击
    img.onclick = function() {
        tbody.removeChild(this.parentNode.parentNode);
    }
    return row;
}