使用事件委托删除表格

最新推荐文章于 2023-02-02 22:17:33 发布

HAI6545

最新推荐文章于 2023-02-02 22:17:33 发布

阅读量293

点赞数 1

分类专栏： JavaScript案例

本文链接：https://blog.csdn.net/HAI6545/article/details/122198851

版权

webview elementui linq

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<table width="500" border=1>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>12</td>
        <td>男</td>
        <td>删除</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>13</td>
        <td>女</td>
        <td>删除</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>15</td>
        <td>女</td>
        <td>删除</td>
    </tr>
</table>
</body>
<script>
document.querySelector('table').onclick = function(){
    // 获取精准的目标元素
    var target = window.event.target
    // 判断是否是删除的td
    if(target.innerText === '删除'){
        // console.log(target);
        // console.log(document.querySelector('table'), target.parentElement);
        target.parentElement.parentElement.removeChild(target.parentElement)
    }
}
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HAI6545

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用事件委托删除表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><table width="500" border=1> <tr> <th>序号</th> <th..
复制链接

扫一扫