Ich habe eine 2-dimensionale JavaScript-Array, die dynamisch eine HTML-Tabelle erstellt. Jede Zeile hat drei Kontrollkästchen. "verweigern", "zustimmen" und "mehr Infos". Mein Ziel ist es, dass der Benutzer seine Checkbox-Auswahl trifft und dann auf eine Schaltfläche klickt und abhängig von den ausgewählten Checkboxen verschiedene Aufgaben ausführt.Suche dynamisch erstellte HTML-Tabelle für Kontrollkästchen
Hier ist der Code zum Erstellen der Tabelle. Die Daten stammen von einer MySQL-Datenbank:
function load() {
$.post(
"Returnsmedb.php",
function(response) {
var block = []
for (var item in response) {
var objectItem = response[item];
var firstname = objectItem.fname;
var lastname = objectItem.lname;
var username = objectItem.uname;
var email = objectItem.email;
var password = objectItem.password;
var deny = document.createElement("input");
deny.type = "checkbox";
deny.class = "chk";
deny.Name = "deny";
var approve = document.createElement("input");
approve.type = "checkbox";
approve.class = "chk";
approve.Name = "approve";
var moreinfo = document.createElement("input");
moreinfo.type = "checkbox";
moreinfo.class = "chk";
moreinfo.Name = "moreinfo";
block.push(firstname);
block.push(lastname);
block.push(username);
block.push(email);
block.push(password);
block.push(deny);
block.push(approve);
block.push(moreinfo);
dataset.push(block);
block = [];
}
var data = [" First Name", " Last Name ", " User Name ", " Email ", " Deny", "Approve", "More Information"]
tablearea = document.getElementById('usersTable');
table = document.createElement('table');
thead = document.createElement('thead');
tr = document.createElement('tr');
for (var i = 0; i < data.length; i++) {
var headerTxt = document.createTextNode(data[i]);
th = document.createElement('th');
th.appendChild(headerTxt);
tr.appendChild(th);
thead.appendChild(tr);
}
table.appendChild(thead);
for (var i = 0; i < dataset.length; i++) {
tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td')); //Added for checkbox
tr.appendChild(document.createElement('td')); //Added for checkbox
tr.appendChild(document.createElement('td')); //Added for checkbox
// var checkbox = document.createElement("INPUT"); //Added for checkbox
// checkbox.type = "checkbox"; //Added for checkbox
tr.cells[0].appendChild(document.createTextNode(dataset[i][0]));
tr.cells[1].appendChild(document.createTextNode(dataset[i][1]));
tr.cells[2].appendChild(document.createTextNode(dataset[i][2]));
tr.cells[3].appendChild(document.createTextNode(dataset[i][3]));
tr.cells[4].appendChild((dataset[i][5])); //Added for checkbox
tr.cells[5].appendChild((dataset[i][6])); //Added for checkbox
tr.cells[6].appendChild((dataset[i][7])); //Added for checkbox
table.appendChild(tr);
$('input.chk').on('change', function() {
$('input.chk').not(this).prop('checked', false);
});
}
tablearea.appendChild(table);
// console.log(dataset);
}, 'json'
);
}
Die Tabelle hat gut funktioniert. Derzeit kann ich die Tabelle durchlaufen und die Daten in ein JSON-Objekt konvertieren. Mein Gedanke ist, dass, wenn zum Beispiel "verweigern" in einigen Zeilen ausgewählt wurde, ich diese spezifischen Zeilen in ein Objekt setzen und sie an eine bestimmte Datenbank senden würde. Hier arbeite ich gerade.
function submit() {
tablearray = [];
$("#submit").click(function() {
alert("Value: " + $("#deny").val());
});
// $('#submit').click(function() {
//$('#usersTable').find('input[type="checkbox"]:checked').each(function() {
// $(this) = tablearray;
// console.log(tablearray);
// });
// });
$('#usersTable tr').each(function(row, tr) {
TableData = TableData + $(tr).find('td:eq(0)').text() + ' ' + $(tr).find('td:eq(1)').text() + ' ' + $(tr).find('td:eq(2)').text() + ' ' + $(tr).find('td:eq(3)').text() + ' ' + $(tr).find('td:eq(4)').text() + ' ' + $(tr).find('td:eq(5)').text() + ' ' + $(tr).find('td:eq(6)').text() + ' ' + '\n';
});
var TableData = new Array();
$('#usersTable tr').each(function(row, tr) {
if ($('#deny').prop('checked')) {
TableData[row] = {
"fname": $(tr).find('td:eq(0)').text(),
"lname": $(tr).find('td:eq(1)').text(),
"uname": $(tr).find('td:eq(2)').text(),
"email": $(tr).find('td:eq(3)').text(),
"deny": $(tr).find('td:eq(4)').text(),
"approve": $(tr).find('td:eq(5)').text(),
"info": $(tr).find('td:eq(6)').text()
}
}
});
TableData.shift();
console.log(TableData)
}
Jede Hilfe/Beratung wäre sehr willkommen!
Was ist eine gute Möglichkeit zu wissen, ob das funktioniert oder nicht? Ich habe die von Ihnen vorgeschlagenen Änderungen vorgenommen und mein Tabledata-Array ist leer. Ich setzte die if-Anweisung direkt bevor mein Tisch in ein Array gesetzt wurde. –
Überprüfen Sie Ihre 'console.log (TableData)', siehe aktualisierte Antwort. – ewwink
Ich habe versucht, Ihr Beispiel zu verwenden, und ich bekomme keine anderen Ergebnisse. Mein console.log (TableData) ist noch leer. Sollte es nicht so einfach sein wie wenn ein Kontrollkästchen ausgewählt ist, sollte es einen Wert von wahr oder 1 haben? Ich könnte dann diese Ergebnisse in ihr eigenes Array filtern, oder? BTW- Ich schätze Ihre Hilfe. –