使用 jquery 表中的复选框从数组中删除 JavaScript 对象

Posted 2023-05-09

【中文标题】使用 jquery 表中的复选框从数组中删除 JavaScript 对象

【英文标题】：Remove the JavaScript object from array with checkbox in jquery table

【发布时间】：2017-11-09 07:39:36

【问题描述】：

我正在这里处理项目我遇到了一个问题：我已经创建了 jQuery 表并在复选框上选中获取特定行的所有值并将其推送到数组中现在我想从数组中删除每行记录当我取消选中该行。我已经编写了一些删除脚本，但它不能正常工作。并告诉我有没有简单的方法可以在 jQuery 表中使用复选框获取特定行的数据。

脚本

$.ajax(
    type: 'POST',
    url: "/Student/GetFee",
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    data: JSON.stringify( Class_Id: Class_Id ),
    success: function (list) 
        $("#view").html('');
        $.each(list, function (key, value) 
            var html = $(
                '<tr>' +
                    '<td>' + value.Id + '</td>' +
                    '<td>' + value.FeeHeadName + '</td>' +
                    '<td>' + value.SchoolName + '</td>' +
                    '<td>' + value.ClassName + '</td>' +
                    '<td>' + value.Amount + '</td>' +
                    '<td>' + "<input type='text'  name='Paid' class='paid' onkeypress='paid(this)'/>" + '</td>' +
                    '<td>' + "<input type='text' class='Discount' name='Discount' onkeypress='discount(this)'/>" + '</td>' +
                    '<td>' + "<input type='text' class='NetAmount' name='NetAmount' />" + '</td>' +
                    '<td>' + "<input type='checkbox' class='ckb'/>" + '</td>' +
                '</tr>');
            $("#view").append(html);
            html = '';
        );

        //pushing objects in array
        $('#view input[type=checkbox]').click(function ()                                              
            var row = $(this).closest('tr');
            var id = row.find('td:eq(0)').text();
            var fname = row.find('td:eq(1)').text();
            var sname = row.find('td:eq(2)').text();
            var cname = row.find('td:eq(3)').text();
            var amount = row.find('td:eq(4)').text();
            var paid = row.find($('.paid')).val();
            var discount = row.find($('.Discount')).val();
            var netAmount = row.find($('.NetAmount')).val();
                            
            if ($(this).is(":checked")) 
                info.push(                                 
                    Fee_Id: id,
                    FeeHeadName: fname,
                    sname: sname,
                    cname: cname,
                    Amount: amount,
                    Paid: paid,
                    Discount: discount,
                    NetAmount: netAmount
                );                            
                console.log(info);
            
            else 
                if ($(this).not(":checked")) 
                    var x = info.indexOf($(this).val());
                    info.splice(x, 1);
                    console.log(info);
                
            
        );
    
);

【问题讨论】：

你正在寻找复选框的$(this).val()，但你是在任何地方插入它吗？

您将复杂对象添加到数组中，但仅在尝试删除时检查复选框的值（这是一个简单值）（它们不是同一件事）。但是你真的想在这里做什么。你是如何使用数组的。如果要发布，那为什么不在提交方法中构建数组呢？

【参考方案1】：

您必须在数组内部循环并检查哪一个具有未检查行的 id

if ($(this).not(":checked")) 
    var indexToRemove = -1;

    for (var i = 0; i < info.length; i++) 
        if (info[i].Fee_id == id) 
            indexToRemove = i;
            break;
        
    
    if (indexToRemove != -1) 
        info.splice(indexToRemove, 1);
    

【讨论】：

它不工作我已经在 if (info[i].Fee_id == id) 它不显示任何警报之后发出警报

indexToRemove 每次取消选中时总是 -1

变量“id”有值吗？语句：var row = $(this).closest('tr'); var id = row.find('td:eq(0)').text();应该在 uncheck 方法之前调用

我只是在 break 之前将 info.splice(indexToRemove, 1) 放在上面的 if 语句中，它对我有用，我已经删除了第二个 if 条件，感谢您的帮助