javascript - 在动态创建的 HTML 表中搜索复选框

Question

我有一个二维 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)

}

任何帮助/建议将不胜感激!

Answer 1

首先修复你的代码，替换

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>