js表格 直接点删除按钮需要出现需要选中行才能删除

就是这个代码应该怎么写啊
未选中行直接删除 会出现未选中行的提示

img


<!DOCTYPE html>
<html lang="zh_en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: rebeccapurple 1px solid;
        }
        th,td{
            width: 40px;

            border: rebeccapurple 1px solid;
        }
    </style>
</head>
<body>
    <table>
       <!--声明表格头部-->
        <thead>
        <td><input type="checkbox"></td>
            <th>A</th>
            <th>A</th>
            <th>A</th>
        </thead>

        <!--声明表格主体-->
        <tbody>
            <tr class = "tr_1">
                <td><input type="checkbox" class="input_1"></td>
                <td>B</td>
                <td>B</td>
                <td><button class="buttom_1">删除</button></td>
            </tr>
        </tbody>
    </table>
<script>
    //获取删除节点元素
    var del_1 = document.querySelector(".buttom_1");
    //获取复选框节点元素
    var choicebox = document.querySelector(".input_1")
    //获取当前删除行节点元素
    var tbody = document.querySelector("tbody")

    //核心思路就在判断复选框是否被选中
    del_1.addEventListener("click",function (){
        if(!choicebox.checked){
            alert("没有选中,不能删除")
        }else {

            tbody.removeChild(tr_1);
            alert("选中删除当前行")
        }
    })


</script>



</body >
</html>

你代码贴一下

首先你这种情况属于正常的，一般情况直接操作的话都是选中后才可以删除，如果你想在某一行不远中直接点删除按钮能操作的话反而不合适，不过也可以实现，就是点击删除时将点击多选框赋值id的逻辑加进去，然后再删除

根据你那个链接，渲染表格内容的时候会给每一个tr行设置一个唯一的id, 点击删除按钮的时候执行的是fn(id)方法，先选中再点击选中删除按钮执行的是**del()**方法。