为了账号安全,请及时绑定邮箱和手机立即绑定

第一行无法删除,我也不到为啥

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>阶段练习9</title>
 <!--编程练习
        制作一个表格,显示班级的学生信息。
        要求:
        1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff
        2. 点击添加按钮,能动态在最后添加一行
        3. 点击删除按钮,则删除当前行-->
 <style type="text/css">
 body {
            font-family: 微软雅黑;
 font-size: 15px;
 }

        table {
            text-align: center;
 width: 800px;
 border: 2px solid black;
 }

        caption {
            background-color: darkgray;
 border: 1px solid black;
 font-weight: bold;
 font-size: 20px;
 }

        th, tr, td {
            border: 1px solid black;
 }

        tr {
            background-color: #fff;
 }

    </style>
    <script type="text/javascript">
 /**
         * 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff
         */
 window.onload = function mouse() {
            var tr = document.getElementsByTagName('tr');
 for (var i = 0; i < tr.length; i++) {
                changcolor(tr[i]);
 }
        }
        function changcolor(obj) {
            obj.onmousemove = function () {
                obj.style.backgroundColor = '#f2f2f2';
 }
            obj.onmouseout = function () {
                obj.style.backgroundColor = '#fff';
 }
        }
        var num = 2;
 function add() {
            num++;
 //创建一行
 var tr = document.createElement('tr');
 //创建单元格
 var id = document.createElement('td');
 //为单元格赋值
 id.innerHTML="xsh000"+num;
 //创建单元格
 var name = document.createElement('td');
 //为单元格赋值
 name.innerHTML="第"+num+"个学生";
 //创建单元格
 var sex = document.createElement('td');
 //为单元格赋值
 sex.innerHTML="男";
 //创建单元格
 var age = document.createElement('td');
 //为单元格赋值
 age.innerHTML=12+num;
 //创建单元格
 var del = document.createElement('td');
 //为单元格赋值
 del.innerHTML="<a href='javascript:' onclick='deleteInfo(this);'>"+"删除</a>";
 var tb=document.getElementById('table');
 //添加子节点
 tb.appendChild(tr);
 //添加子节点
 tr.appendChild(id);
 //添加子节点
 tr.appendChild(name);
 //添加子节点
 tr.appendChild(sex);
 //添加子节点
 tr.appendChild(age);
 //添加子节点
 tr.appendChild(del);
 var tr=document.getElementsByTagName('tr');
 for(var i=0;i<tr.length;i++){
                //改变行颜色
 changcolor(tr[i]);
 }
        }
        //删除,但是第一行却无法删除,不知道为什么
 function deleteInfo(obj){
            var del=obj.parentNode.parentNode;
 del.parentNode.removeChild(del);
 }
    </script>
</head>
<body>
<div>
    <table id='table' summary="学生信息表">
        <caption>学生信息表</caption>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
        <tr>
            <td>xsh0001</td>
            <td>rock</td>
            <td>男</td>
            <td>21</td>
            <td><a href="javascript:deleteInfo(this);">删除</a></td>
        </tr>
        <tr>
            <td>xsh0002</td>
            <td>refain</td>
            <td>男</td>
            <td>20</td>
            <td><a href="javascript:;" onclick="deleteInfo(this)">删除</a></td>
        </tr>
    </table>
    <input type="button" value="添加一行" onclick="add()">
</div>
</body>
</html>


正在回答

2 回答

this是一个对象,this具体指代的对象比较复杂,学到后面再理解,不过在你的代码里,this指代的是a标签,所以a标签的父节点是td,td的父节点就是tr了,删除函数把这个a标签的祖父(父父)节点声明为对象,就可以用removeChild()方法删除了。

0 回复 有任何疑惑可以回复我~

没有绑定点击事件,在第一行a标签加个onclick="deleteInfo(this)"属性。

0 回复 有任何疑惑可以回复我~
#1

莫子轩 提问者

是哈 我才看到再有就是那个删除方法 我根本不理解为什么那么写 this这个关键字怎么理解
2018-02-18 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

第一行无法删除,我也不到为啥

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信