JavaScript：动态操作table

这里写图片描述
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript：动态操作table</title>
    <style>
        .title {
            text-align: center;
            font-weight: bold;
            background-color: red;
        }
    </style>
    <script type="text/javascript">

        function updateRow() {
            var obj = document.getElementById("myTable");
            console.dir(obj);
            obj.rows[0].className = "title";
        }

        function addTableRow() {
            var table = document.getElementById("myTable");
            oneRow = table.insertRow();//插入一行
            cell1 = oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
            cell2 = oneRow.insertCell();
            cell3 = oneRow.insertCell();
            cell4 = oneRow.insertCell();
            cell1.innerHTML = "jack";
            cell2.innerHTML = "数学";
            cell3.innerHTML = "10";
            cell3.style = "color:red;";
            cell4.innerHTML = "<a href='#'>删除</a>";

        }

        function delImgNode() {
            var dNode = document.getElementById("img");
            document.body.removeChild(dNode);
        }

        function delTableRow(index) {
            console.dir("aaaaaaaaaaa");
            var obj = document.getElementById("myTable");
            obj.deleteRow(index);
        }

        function delTableLastRow() {
            var obj = document.getElementById("myTable");
            var index = obj.rows.length - 1;
            console.dir(index);
            if (index > 0) {
                obj.deleteRow(index);
            } else {
                document.body.removeChild(obj);
            }
        }
    </script>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" id="myTable">
    <thead>
    <td>姓名</td>
    <td>课程</td>
    <td>成绩</td>
    <td>操作</td>
    </thead>

    <tbody>
    <tr>
        <td>小米</td>
        <td>语文</td>
        <td>88</td>
        <td onclick="delTableRow(1)"><a href="#">删除</a></td>
    </tr>
    <tr id="xiaoming">
        <td>小明</td>
        <td>英语</td>
        <td>88</td>
        <td onclick="delTableRow(2)"><a href="#">删除</a></td>
    </tr>
    </tbody>
</table>
<br/>
<br/>
<img src="http://www.w3school.com.cn/i/eg_bulbon.gif" id="img" alt="水果"/>
<br/>
<br/>
<input name="btn" type="button" value="删除灯泡" onclick="delImgNode()"/>
<input name="btn" type="button" value="删除表格最后一行" onclick="delTableLastRow()"/>
<input name="btn" type="button" value="添加一行表格" onclick="addTableRow()"/>
<input name="btn" type="button" value="修改标题样式" onclick="updateRow()"/>

</body>

</html>
JavaScript：动态操作table

猜你喜欢
