表格的增删改

表格内容的增加和删除主要是通过一下方法实现：
insertRow() —— 增加一行
insertCell() —— 增加单元格
deleteRow() —— 删除一行
修改单元格内容的话可以用innerHTML来实现：
若按钮显示“修改”，点击后让需要修改的单元格(theCount)
theCount.innerHTML="<input class='text' id='modifyCount' type='text' value='" + theCount.innerHTML + "'>"
若按钮显示“确认”，点击后让需要修改的单元格(theCount)
theCount.innerHTML = my$("modifyCount").value;

具体代码如下：

html

<div id="inner">
   <h1>前端设计参考书</h1>
    <table>
        <tr>
            <td><input type="checkbox" id="checkAll" "check_All()">全选</td>
            <td>序号</td>
            <td>书名</td>
            <td>价格（元）</td>
            <td>数量</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checks" "check()"></td>
            <td class="num"></td>
            <td>JavaScript入门与提高</td>
            <td>39</td>
            <td>6</td>
            <td>
                <input type="button" value="修改" class="btn" "modify(this)">
                <input type="button" value="删除" class="btn del" "deleteThis(this)">
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checks" "check()"></td>
            <td class="num"></td>
            <td>JavaScript DOM编程艺术</td>
            <td>39</td>
            <td>21</td>
            <td>
                <input type="button" value="修改" class="btn" "modify(this)">
                <input type="button" value="删除" class="btn del" "deleteThis(this)">
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checks" "check()"></td>
            <td class="num"></td>
            <td>JavaScript BOM编程艺术</td>
            <td>29</td>
            <td>11</td>
            <td>
                <input type="button" value="修改" class="btn" "modify(this)">
                <input type="button" value="删除" class="btn del" "deleteThis(this)">
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <input type="button" value="删除选中的书" class="btn btn_del" "deleteBooks()">
            </td>
        </tr>
    </table>

    <div id="deleteBook">

    </div>

    <div id="addBook">
        书名：<input type="text" class="text" id="bookName">
        价格：<input type="text" class="text" id="price">
        数量：<input type="text" class="text" id="count">
        <input type="button" value="增加新书" class="btn" "addBooks()">
    </div>

    <div id="setStyle">
        背景色：
        <select id="bgColor">
            <option value="#FFFFFF" style="background-color: #FFFFFF">#FFFFFF</option>
            <option value="#E6E6E6" style="background-color: #E6E6E6">#E6E6E6</option>
            <option value="#81DAF5" style="background-color: #81DAF5">#81DAF5</option>
            <option value="#F4FA58" style="background-color: #F4FA58">#F4FA58</option>
        </select>
        字体粗细：
        <select id="font_weight">
            <option value="normal" style="font-weight: normal">normal</option>
            <option value="bold" style="font-weight: bold">bold</option>
        </select>
        <input type="button" value="设  置" class="btn" "setStyle()">
    </div>
</div>

css

<style>
	#inner {
	    width: 700px;
	    margin: 0 auto;
	}
	
	table {
	    width: 100%;
	    text-align: center;
	    border-collapse: collapse;
	}
	
	td {
	    border: 1px solid grey;
	    height: 50px;
	    cursor: default;
	}
	
	#addBook, #deleteBook {
	    margin: 30px 0;
	    font-size: 18px;
	}
	
	.text, #bgColor, #font_weight {
	    height: 25px;
	    margin-right: 10px;
	    font-size: 16px;
	    outline: none;
	    padding: 0 5px;
	    border-radius: 3px;
	    border: 1px solid lightgray;
	}
	
	#price, #count {
	    width: 35px;
	}
	
	.btn {
	    height: 30px;
	    padding: 0 10px;
	    background-color: #819FF7;
	    outline: none;
	    border: none;
	    border-radius: 3px;
	    cursor: pointer;
	    color: white;
	}
	
	.del{
	    background-color: #D2413A;
	}
	
	.btn_del{
	    width: 60%;
	    background-color: #D2413A;
	    letter-spacing: 5px;
	    font-size: 16px;
	}
	
	#modifyCount {
	    width: 30px;
	    padding: 0 5px;
	    font-size: 16px;
	    outline: none;
	}
</style>

js

<script>
    /****************通过id获取元素***************/
    function my$(id) {
        return document.getElementById(id);
    }

    /********************复选框******************/
    var checkAll = my$("checkAll");
    var checks = document.getElementsByClassName("checks");

    function check_All() {
        if (checkAll.checked == true) {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = true;
            }
        } else {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = false;
            }
        }
    }

    function check() {
        for (var i = 0; i < checks.length; i++) {
            if (checks[i].checked == false) {
                checkAll.checked = false;
                break;
            } else {
                checkAll.checked = true;
            }
        }
    }

    /*********************设置序号自动按顺序显示***************/
    function setNum() {
        var num = document.getElementsByClassName("num");
        for (var i = 0; i < num.length; i++) {
            num[i].innerText = i + 1;
        }
    }

    /*********************表格增删，样式设置***************/
    var tb = document.getElementsByTagName("table")[0];
    var trs = document.getElementsByTagName("tr");
    
    //增加指定内容到最后一行
    function addBooks() {
        if (my$("bookName").value == "") {
            alert("请输入书名！");
        } else if (my$("price").value == "") {
            alert("请输入价格！");
        } else if (my$("count").value == "") {
            alert("请输入数量！");
        } else {
            var newTR = tb.insertRow(trs.length - 1);
            newTR.insertCell(0).innerHTML = "<input type=\"checkbox\" class=\"checks\" \"check()\">";
            newTR.insertCell(1).innerHTML = trs.length - 2;
            newTR.insertCell(2).innerHTML = my$("bookName").value;
            newTR.insertCell(3).innerHTML = my$("price").value;
            newTR.insertCell(4).innerHTML = my$("count").value;
            newTR.insertCell(5).innerHTML = "<input type=\"button\" value=\"修改\" class=\"btn\" \"modify(this)\">\n" +
                "                        <input type=\"button\" value=\"删除\" class=\"btn del\" \"deleteThis(this)\">";

            tb.rows[trs.length - 2].cells[1].className = "num";
        }
    }
    
    //删除指定行，即删除选中行
    function deleteBooks() {
        var i = 0;
        while (i < checks.length) {
            if (checks[i].checked) {
                tb.deleteRow(i + 1);
                i = 0;
            } else {
                i++;
            }
        }
        setNum();
    }
    
    //删除该行
    function deleteThis(element) {
        tb.deleteRow(element.parentElement.parentElement.rowIndex);
        setNum();
    }
    
    //设置样式
    function setStyle() {     
        var index1 = my$("bgColor").selectedIndex;
        var index2 = my$("font_weight").selectedIndex;
        tb.rows[0].style.backgroundColor = my$("bgColor").options[index1].value;
        tb.rows[0].style.fontWeight = my$("font_weight").options[index2].value;
    }
    
    //修改单元格内容
    function modify(element) {
        var theCount = element.parentElement.previousElementSibling;
        if (element.value == "修改") {
            element.value = "确认";
            theCount.innerHTML = "<input class='text' id='modifyCount' type='text' value='" + theCount.innerHTML + "'>";
            my$("modifyCount").focus();
        } else if (element.value == "确认") {
            element.value = "修改";
            theCount.innerHTML = my$("modifyCount").value;
        }
    }
    
    setNum();      //设置序号自动按序显示
</script>