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

时间:2012-05-31 01:23:31

标签: jquery checkbox html-table

我创建了一个表格,显示结果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;

1 个答案:

答案 0 :(得分:2)

在我得到实际答案之前:你不应该为多个html元素分配相同的ID,但为了达到你想要的目的,你的复选框不需要id所有。相反,你似乎正在使用&#34; .tableBajaMat&#34; class作为唯一标识符,以便 使用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元素的第一个子元素的文本。这些值卡在数组中,然后使用参数名称&#34; clavemat&#34;在Ajax请求中传递该数组。 - 显然你可以把它改成你想要的任何名字。