如何从行表中选中复选框的特定列/单元格中获取值？

Question

我创建了一个显示结果的表格 JSON 以消除任何类型的材料，为它生成表格会添加一个复选框，然后当用户选中该复选框时，我将从第一列如此实现“删除”并删除检查的行数的记录。

也就是说，如果检查了 4 行，那么应该有一个函数从每行的第一列获取数据，因此可以通过 jQuery.ajax 将它们发送到 php 中进行处理文件，但我想不出该怎么做

生成每行带有复选框的表格的代码

// ...
$.ajax({
type: "POST",
url: action,
data: dataSearch,
success: function (response) {
    if (response[0].success == "success") {
        $('.tableBajaMat tr:gt(0)').remove(); //delete tr except first row
        $.each(response, function (index, record) {
            var row = $("<tr />");
            $("<td />").text(record.clavemat).appendTo(row);
            $("<td />").text(record.tipomat).appendTo(row);
            $("<td />").text(record.titulomat).appendTo(row);
            $("<td />").text(record.autormat).appendTo(row);
            $("<td />").html("<input type='checkbox' id='marcar'/>").appendTo(row);
            row.addClass("alt");
            row.appendTo(".tableBajaMat");
        });
    } else {
        alert("Data not found!");
    }

}
});
return false;

Answer 1

在我得到我的实际答案之前，顺便说一句：您不应该将相同的 id 分配给多个 html 元素，但要实现您想要做的事情，您的复选框根本不需要 id。相反，您似乎使用“.tableBajaMat”类作为唯一标识符，因此您应该使用 id。不过不管怎样……

假设您创建了一个触发删除当前选中复选框的按钮，您可以执行以下操作：

<input type="button" id="deleteBtn" value="Delete Selected">

$('#deleteBtn').click(function() {

    var clavemats = [],
        $selectedCBs = $('.tableBajaMat input[type="checkbox"]:checked');

    if ($selectedCBs.length === 0) {
        alert("No rows selected to delete.");
        return;
    }
    $selectedCBs.each(function() {
        clavemats.push( $(this).closest('tr').children(':first').text() );
    });
    // now clavemats is an array of the clavemat values
    $.ajax({
        url : 'yourURLhere.php',
        data : { clavemat : clavemats }
        success : function(data) {
           // whatever you want to do on success goes here
        }
    });

});

以上循环遍历表中所有选中的复选框。在.each() 回调中this 是当前复选框，因此$(this).closest('tr').children(':first').text() 获取当前复选框所在的tr 元素的第一个子元素的文本。这些值被卡在一个数组中，然后传递该数组在参数名称为“clavemat”的 Ajax 请求中 - 显然您可以将其更改为您想要的任何名称。