我有一个二维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 对象。我的想法是，例如，如果在几行上选择了"deny"，我会将这些特定行放在一个对象中并将它们发送到特定的数据库。这是我目前正在做的事情。
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)
}
任何帮助/建议将不胜感激！
首先修复你的代码，替换
xxxx.class => xxxx.className
xxx.Name => xxxx.name
然后获取值替换
if ($('#deny').prop('checked')) {
跟
if ($(tr).find('input[name=deny]').prop('checked')) {
因为deny不是ID而是输入name
试试吧
var response = [{
"fname": "Nathanial",
"lname": "Bohlje",
"uname": "nbohlje0",
"email": "nbohlje0@hud.gov",
"password": "JnSx8r"
}, {
"fname": "Nadeen",
"lname": "Pollock",
"uname": "npollock1",
"email": "npollock1@cornell.edu",
"password": "loQCxBhcC"
}, {
"fname": "Herby",
"lname": "Brisco",
"uname": "hbrisco2",
"email": "hbrisco2@who.int",
"password": "s6gaztFi"
}, {
"fname": "Ashil",
"lname": "Asquith",
"uname": "aasquith3",
"email": "aasquith3@nsw.gov.au",
"password": "66zu1BK"
}, {
"fname": "Lucian",
"lname": "Neighbour",
"uname": "lneighbour4",
"email": "lneighbour4@theatlantic.com",
"password": "HbntuvT4gohZ"
}, {
"fname": "Cortie",
"lname": "Botger",
"uname": "cbotger5",
"email": "cbotger5@npr.org",
"password": "KPRpU2tl6"
}, {
"fname": "Sella",
"lname": "Dufton",
"uname": "sdufton6",
"email": "sdufton6@taobao.com",
"password": "Jd8Yzw0zKq"
}, {
"fname": "Latrena",
"lname": "Di Bartolommeo",
"uname": "ldibartolommeo7",
"email": "ldibartolommeo7@reddit.com",
"password": "xjHuwyXrC96k"
}, {
"fname": "Vi",
"lname": "Smy",
"uname": "vsmy8",
"email": "vsmy8@mac.com",
"password": "CpYOrWr0cwA"
}, {
"fname": "Owen",
"lname": "Klulicek",
"uname": "oklulicek9",
"email": "oklulicek9@typepad.com",
"password": "OUXT3no8"
}];
var block = []
var dataset = []
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.className = "chk";
deny.name = "deny";
var approve = document.createElement("input");
approve.type = "checkbox";
approve.className = "chk";
approve.name = "approve";
var moreinfo = document.createElement("input");
moreinfo.type = "checkbox";
moreinfo.className = "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);
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 ($(tr).find('input[name=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)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="check" value="check" onclick="submit()">
<div id="usersTable"></div>您可以找到任何选中"拒绝"框的行，如下所示：
var denyRows = $("#usersTable input[name='deny']:checked").closest("tr")
然后，您可以遍历该jQuery对象并执行您需要执行的操作：
denyRows.each(function(index, tr) {
...
});