看视频学习的案例,按着视频讲解去做的,但是浏览器报错了,说没定义,各位帮我看一下谢谢!

浏览器报错说 delTr 没有定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table{
            border: 1px solid;
            margin: auto;
            width: 50%;

        }
        div{
            margin: 50px;
            text-align: center;
        }
        th,td{
            text-align: center;
            border: 1px solid;
        }

    </style>
</head>
<body>
    <div>
        <input type="text" id="id" name="number" placeholder="请输入编号">
        <input type="text" id="name" name="name" placeholder="请输入姓名">
        <input type="text" id="sex" name="sex" placeholder="请输入性别">
        <input type="button" id="btn_add" value="添加">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>周星驰</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>周润发</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>欧阳娜娜</td>
            <td>女</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>
    <script>
        //添加功能分析
        /*
            1。给添加按钮绑定事件
            2.获取文本框内容
            3。创建td,设置td的文本为文本框的内容
            4.将td添加到tr中
            6.获取table,将tr添加到table中
        */
        //删除功能分析
        /*
            1.确定点击的是哪一个超链接
                <a href="javascript:void(0);" onclick="delTr(this);">删除</a>
            2.怎么删除?
                removeChild():通过父节点删除子节点
        */
        var btn_add = document.getElementById("btn_add");
        btn_add.onclick = function(){
            //value 在输入框中 代表的是输入的内容
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var sex = document.getElementById("sex").value;

            //创建td,赋值td的标签体

            //id 的 td
            var td_id = document.createElement("td");
            //创建文本节点 , 将id内容放进文本节点
            var text_id = document.createTextNode(id);
            //将文本节点放进创建的 td 节点
            td_id.appendChild(text_id);

            //name 的 td
            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);

            //sex 的 td
            var td_sex = document.createElement("td");
            var text_sex = document.createTextNode(sex);
            td_sex.appendChild(text_sex);

            // a 标签 的 td
            var td_a = document.createElement("td");
            //a是标签,所以还要创建a标签
            var ele_a = document.createElement("a");
            //创建 a标签的 属性
            // .setAttribute("属性名","属性值");
            ele_a.setAttribute("onclick","delTr(this);"); //设置属性,方便以后增加删除功能给予调用
            ele_a.setAttribute("href","javascript:void(0);");
            var text_a = document.createTextNode("删除");
            //将“删除”添加到 a标签内 里
            ele_a.appendChild(text_a);
            //将 a超链接添加到 td里
            td_a.appendChild(ele_a);


            //创建tr
            var tr = document.createElement("tr");
            //将 td 添加到 tr内
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_sex);
            tr.appendChild(td_a);

            //获取table , 通过标签名获取,虽然只有一个,但是TagName返回的是数组
            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);


            //删除方法 此处的obj为形参 可随意起名
            function delTr(obj){
                var table = obj.parentNode.parentNode.parentNode;
                var tr = obj.parentNode.parentNode;

                table.removeChild(tr);
            }
        }
    </script>
</body>
</html>

1个回答

}位置错了
btn_add.onclick = function(){ 的闭口}在delTr之后,delTr 函数编程了这个函数的子函数,所以找不到,在delTr函数之前添加一个},函数之后去掉一个}就好了

weixin_43415461
betender 昨晚看到了后来没删掉,没来的及删
大约一个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问