0
我有一个动态创建HTML表格的2维JavaScript数组。每行有三个复选框; “拒绝”，“批准”和“更多信息”。我的目标是让用户选择复选框，然后单击一个按钮，根据所选的复选框执行不同的任务。搜索为选中的框动态创建的HTML表格
这里是创建表的代码。数据来自MySQL数据库：
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'
);
}
该表一直工作正常。目前，我能够遍历表并将数据转换为JSON对象。我的想法是，例如，如果在几行上选择“拒绝”，我会将这些特定的行放入一个对象中，并将它们发送到特定的数据库。这是我目前的工作。
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)
}
任何帮助/建议将不胜感激！
什么是知道这个工作与否的好方法？我做了你建议的更改，我的Tabledata数组显示为空。在将表放入数组之前，我将if语句放在了前面。 –
检查你的'console.log（TableData）'，看到更新的答案。 – ewwink
我试过使用你的例子，我没有得到任何不同的结果。我的console.log（TableData）仍然是空的。它不应该像选中复选框那么简单，它应该具有true或1的值？然后我可以将这些结果过滤到他们自己的数组中，对吗？顺便说一句，我感谢您的协助。 –