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

这个删除功能怎么实现啊?弄不出来啊?

<!DOCTYPE html>

<html>


<head>

    <title>表格增删练习</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>

        tr:hover {

            background-color: #f2f2f2;

        }


        td {

            width: auto;

        }


        input {

            border: none;

            width: 100%;

            font-size: 17px;

        }


        #inu {

            width: 100px;

            border: solid 1px black;

            font-weight: bold;

        }

    </style>

    <script type="text/javascript">

        /*要求:

            1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff

            2. 点击添加按钮,能动态在最后添加一行

            3. 点击删除按钮,则删除当前行*/

        function btn() { //添加按钮功能实现

            var tabl=document.getElementsByTagName("table");

            var str = document.createElement("tr");

            str.style.height = "20px";

            str.innerHTML = "<td>" + "<td>" + "<td>" + "<a onclick=ace() href=javascript:;>删除";

            tabl[0].appendChild(str);

        }

        //删除功能的实现

        function ace(){

            var tabl=document.getElementsByTagName("table");

            var x=tabl.removeChild(table.childNodes());

        }

    </script>

</head>


<body>

    <table border="1" width="50%" id="table">

        <tr>

            <th>学号</th>

            <th>姓名</th>

            <th>操作</th>

        </tr>


        <tr>

            <td>xh001</td>

            <td>王小明</td>

            <td><a href="javascript:;" onclick="ace()">删除</a></td>

            <!--在删除按钮上添加点击事件  -->

        </tr>


        <tr>

            <td>xh002</td>

            <td>刘小芳</td>

            <td><a href="javascript:;" onclick="ace()">删除</a></td>

            <!--在删除按钮上添加点击事件  -->

        </tr>

    </table>

    <input type="button" value="添加一行" onclick="btn()" id="inu" />

    <!--在添加按钮上添加点击事件  -->

</body>


</html>


正在回答

1 回答

可以参见我的答案:

http://img1.sycdn.imooc.com//5d779e3600019b2210130201.jpg

http://img1.sycdn.imooc.com//5d779eae00012bcc07470221.jpg

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

今朝似梦愿回昨 提问者

//删除功能的实现 function afn(obj){ var tdd=document.getElementsByTagName("a"); var del=tdd[1].parentNode.parentNode.parentNode; var dele=del.removeChild(del.childNodes[1]); } 我这个功能实现删除的不是我想要删除的,是其他的行内人被删除。怎么修改啊?
2019-09-10 回复 有任何疑惑可以回复我~
#2

幕布斯617278 回复 今朝似梦愿回昨 提问者

1. 你在获取a标签的时候, tdd的结果是所有的a组成的(伪)数组,既然是一串的a,那要如何来确认你要删除你点击的这个a所在的这行? 2. var del=tdd[1].....下标1,意味着你要删第二个a所在的行, 但是接连3个parentNode,最终del就是table(或者tbody) 3. dele=....,你最终在table里把它的第2个子节点删除了,并将删除的该节点赋值给了dele; ----------------
2019-09-11 回复 有任何疑惑可以回复我~
#3

幕布斯617278

另外: ---------------- 你删的不是你想删的,在于你根本没把我们点击删除按钮时的所在行找到. 那要如何获取到此刻点击到的这个a元素呢? 实际上, 在原生js里,为我们提供了: event对象(自己动手去查资料,比如搜索"js event",看点文档了解一下啊!), 简单来说就是,当某个元素发生某种状态改变(比如:click,mouseover等),我们触发事件时调用的函数中就有event参数, 并且这个参数中有一个target属性, 该属性值可以简单理解成就是我们当前的这个元素,即currentElement = event.target
2019-09-11 回复 有任何疑惑可以回复我~
#4

今朝似梦愿回昨 提问者 回复 幕布斯617278

查了,event.target是返回触发此事件的元素。懂了。万分感谢
2019-09-11 回复 有任何疑惑可以回复我~
#5

慕慕三帅 回复 幕布斯617278

这样方便多了谢谢
2019-09-12 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

这个删除功能怎么实现啊?弄不出来啊?

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