使用事件委托删除表格

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

HAI6545

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

阅读量359

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript案例文章标签： webview elementui linq

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

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

这是一个HTML页面示例，展示了一个包含姓名、年龄和性别的表格，并且实现了点击'删除'按钮删除对应行的功能。通过JavaScript实现动态操作DOM节点。


<!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>