js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据

最新推荐文章于 2024-06-12 10:02:09 发布

层楼中人

最新推荐文章于 2024-06-12 10:02:09 发布

阅读量9k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端学学

本文链接：https://blog.youkuaiyun.com/zimu_2080/article/details/89554722

前端学学专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用JavaScript和jQuery操作HTML表格中的复选框，包括获取选中状态、读取选中行的数据，并将特定列的数据传递给服务器进行删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据

如下是在js中通过DOM方式创建的row中的一列为CheckBox类型。

        var row = document.createElement('tr'); //创建行

        var checkbox = document.createElement('td');//创建列
        row.appendChild(checkbox);
        var btnCheckbox = document.createElement('input');
        btnCheckbox.setAttribute('name','ckb');
        btnCheckbox.setAttribute('type','checkbox');
        btnCheckbox.setAttribute('value','false');
        checkbox.appendChild(btnCheckbox);

如我们在table之外有一个删除按钮，需要点击它删除table中选中的数据，而传给服务端的是某一列数据比如id。
先判断是否选中，再根据选中的列获取id值，发送给服务端。

$("#btnDelSpell").click(function () {
            var checkLength = $("input:checkbox[name='ckb']:checked").length;
            if(checkLength == 0) {
                alert("请至少选择一条咒语！");
                return;
            }
            $("input[type='checkbox']").each(function(){ //遍历checkbox的选择状态
                if($(this).prop("checked")){ //如果值为checked表明选中了
                    alert($(this).closest('tr').find('td').eq(1).text()); //获取eq为1的那一列数据
                }
            });
        });