table获取checkbox是否选中的几种方法

最新推荐文章于 2024-05-22 17:04:38 发布

chen254810107

最新推荐文章于 2024-05-22 17:04:38 发布

阅读量6.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/chen254810107/article/details/70241341

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery操作表格的方法，包括如何选取表格中的特定元素、获取被选中复选框的相关信息，并将这些信息组织成不同的数据结构，如数组或对象等。通过这些实用的代码片段，开发者可以更高效地进行前端表格数据处理。

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

function test() {

    $(".table tbody tr").find("td:first input:checkbox").each(function () {
        var ischecked = $(this).prop("checked");
        alert(ischecked);

    });

    $(".table input:checkbox").each(function () {
        if ($(this).attr("checked") == true) {
            alert($("table input:checkbox").index(this))
        }
    });

    $(".table tr td:eq(0)").each(function () {

        $(this).find("input[type=checkbox]").prop("checked", "checked");

    });


    var data = [];

    $(".table tbody tr").find(":checkbox:checked").each(function () {
        var val = $(this).parent().next().text();
        data.push(val);
        alert(val);
    });
    alert(data);
}

function ck() {
    var tbodyObj = document.getElementById('tbodydata');
    $("table :checkbox").each(function (key, value)
    {
        if ($(value).prop('checked'))
        {
            alert(tbodyObj.rows[key].cells[1].innerHTML);
            alert(tbodyObj.rows[key].cells[2].innerHTML);
        }
    })

    //获取选中的数据组      
    var array = $(".table tbody input[type=checkbox]:checked").map(function () {
        return { "cell2": $.trim($(this).closest("tr").find("td:eq(2)").text()), "cell4": $.trim($(this).closest("tr").find("td:eq(4)").text()) };
    }).get();
    $.each(array, function (i, d) { alert(d.cell2 + "|" + d.cell4); })

    //$.each(array, function (i, d) { alert(d.cell2 + "|" + d.cell4); })

    //获取选中的数据组     
    var array = $(".table tbody input[type=checkbox]:checked").map(function () {
        alert($.trim($(this).closest("tr").find("td:eq(1)").text()));
        alert($.trim($(this).closest("tr").find("td:eq(2)").text()));
        alert($.trim($(this).closest("tr").find("td:eq(3)").text()));
        alert($.trim($(this).closest("tr").find("td:eq(2)").text()));
        //return { "cell2": $.trim($(this).closest("tr").find("td:eq(2)").text()), "cell4": $.trim($(this).closest("tr").find("td:eq(4)").text()) };
    }).get();

    ///把取出来的的值放入数组
    var array = $(".table tbody input[type=checkbox]:checked").map(function () {
        return {
            "code": $.trim($(this).closest("tr").find("td:eq(2)").text()),
            "name": $.trim($(this).closest("tr").find("td:eq(4)").text())
        };
    }).get();
    $.each(array, function (i, d) { alert(d.code + "|" + d.name); })
}

function test2() {
    var selectedData = [];
    $(":checkbox:checked").each(function () {
        var tablerow = $(this).parent("tr");
        var code = tablerow.find("[name='p_code']").val();
        var name = tablerow.find("[name='p_name']").val();
        var price = tablerow.find("[name='p_price']").val();
        selectedData.push({ Code: code, Name: name, Price: price });
    });

    var selectedData2 = [];
    $(":checkbox:checked").each(function () {
        var tablerow = $(this).parent("tr");
        var code = tablerow.find("[name='p_code']").val();
        var name = tablerow.find("[name='p_name']").val();
        var price = tablerow.find("[name='p_price']").val();
        selectedData2.push({ Code: code, Name: name, Price: price });
    });
    var selectedData3 = [];
    $(":checkbox:checked", ".table").each(function () {
            var tablerow = $(this).parent("tr");
            var code = tablerow.find("[name='p_code']").val();
            var name = tablerow.find("[name='p_name']").val();
            var price = tablerow.find("[name='p_price']").val();
            selectedData3.push({ Code: code, Name: name, Price: price });
        });

}