CODEWITHSUNDEEP
jquerycheckboxhtml-table
SoldierCorp
SoldierCorp

Reputation: 7700

How get values from a specific column/cell of checked checkbox in a row table?

I created a table showing the results JSON to eliminate any type of material, for it to generate the table will add a checkbox, then when the user checked the checkbox, I will take the data from the first column to be so implement a "delete from" and delete records for the number of rows that are checked.

That is, if 4 rows are checked, then there should be a function that takes the data from the first column of each row and so can send them via jQuery.ajax for processing in a php file, but I can not think how to do

CODE TO GENERATE TABLE WITH CHECKBOX IN EACH ROW

// ...
$.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;

Upvotes: 1

Views: 4367

Answers (1)

nnnnnn
nnnnnn

Reputation: 150010

An aside before I get to my actual answer: you shouldn't be assigning the same id to more than one html element, though to achieve what you want to do your checkboxes don't need an id at all. Conversely, you seem to be using the ".tableBajaMat" class as a unique identifier, so that's where you should use id. But anyway...

Assuming you create a button that triggers the delete for currently selected checkboxes you could do something like this:

<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
        }
    });

});

The above loops through all of the checked checkboxes in the table. Within the .each() callback this is the current checkbox, so $(this).closest('tr').children(':first').text() gets the text of the first child of the tr element that the current checkbox is in. These values are stuck in an array, and then that array is passed in the Ajax request with the parameter name "clavemat" - obviously you can change that to whatever name you want.

Upvotes: 2

Related Questions