Javascript HTML表格显示JQuery复选框按1关闭，不保留数据

我有一些JavaScript代码，应该显示一个复选框矩阵。我想在顶部列出列标题，然后在每个标题下有一列复选框的位置放置行，再在空白标题框下放置一列具有行名称的左侧列。我想看看这一页：

我写了一把几乎能用的小提琴：

第一个问题是“我的表格”将复选框显示在具有行名称的单元格的另一行上。我检查了我的HTML，它似乎是正确的，但我想知道我是否遗漏了一个

或

。我像这样添加行名称单元格（完整代码见Fiddle）：

当我选中一个复选框时，我得到“checkbox changed chug intersection（未定义，未定义）：true”。它应该打印类似（绳子、烹饪）的内容，具体取决于选中的框

任何帮助都将不胜感激。

我修复了您的问题

---

对于记录，您遇到了一些问题，开始字符串中有一个额外的

，ChugName[x]的额外输出，并且您没有使用

attr（）

jQuery函数正确获取数据属性。

使用jQuery追加时，标记会自动关闭

试试这个：

$(function() {
  var target = $('#checkboxes');
  var chugNames = ["Ropes", "Cooking", "Outdoor Cooking"];
  var i, x, y, checkbox, html;
  html = "<table class=\"responsive-table-input-matrix\"><thead><tr><th></th>";
  // Table column headers                                                   
  for (i = 0; i < chugNames.length; i++) {
    html += "<th>" + chugNames[i] + "</th>";
  }
  html += "</tr></thead><tbody>";

  for (x = 0; x < chugNames.length; x++) {
    // Add a row for each chug.                             

    html += "<tr><td>" + chugNames[x] + "</td>";

    for (y = 0; y < chugNames.length; y++) {
      html += "<td>";
      checkbox = '<input type=checkbox ';
      checkbox += ' data-x=' + chugNames[x]
      checkbox += ' data-y=' + chugNames[y]
      checkbox += '/>'
      html += checkbox;
      html += "</td>";
    }
    html += "</tr>";
  }
  html += "</tbody></table>";

  target.append(html).width(function() {
    return $(this).find("input:checkbox").outerWidth() * chugNames.length
  });

  target.on('change', 'input:checkbox', function() {
    var $this = $(this),
      x = $this.data('x'),
      y = $this.data('y'),
      checked = $this.prop('checked');
    alert('checkbox changed chug intersection (' + x + ', ' + y + '): ' + checked);
  });

});

$（函数（）{
变量目标=$（“#复选框”）；
var chugNames=[“绳索”、“烹饪”、“户外烹饪”]；
变量i、x、y、复选框、html；
html=“”；
//表列标题
对于（i=0；i

Hm-我试了一下b43w6ft5的小提琴，但还是出现了同样的错误。我看错了吗？这很尴尬，我忘了保存：P。用这个试试。我还用新的JSFIDLE更新了答案。谢谢！这修复了布局错误。我仍然没有得到表中的值，但下面的答案解决了这一问题。：）再次感谢！非常感谢。这解决了两个问题。一个小小的修正：chugNames[x]和chugNames[y]的附录需要引号，因为它们可能是多个单词。其他一切都很好-再次感谢。

   target.on('change', 'input:checkbox', function() {
     var $this = $(this),
       x = $this.data('x'),
       y = $this.data('y'),
       checked = $this.prop('checked');
     alert('checkbox changed chug intersection (' + x + ', ' + y + '): ' + checked);
   });

$(function() {
  var target = $('#checkboxes');
  var chugNames = ["Ropes", "Cooking", "Outdoor Cooking"];
  var i, x, y, checkbox, html;
  html = "<table class=\"responsive-table-input-matrix\"><thead><tr><th></th>";
  // Table column headers                                                   
  for (i = 0; i < chugNames.length; i++) {
    html += "<th>" + chugNames[i] + "</th>";
  }
  html += "</tr></thead><tbody>";

  for (x = 0; x < chugNames.length; x++) {
    // Add a row for each chug.                             

    html += "<tr><td>" + chugNames[x] + "</td>";

    for (y = 0; y < chugNames.length; y++) {
      html += "<td>";
      checkbox = '<input type=checkbox ';
      checkbox += ' data-x=' + chugNames[x]
      checkbox += ' data-y=' + chugNames[y]
      checkbox += '/>'
      html += checkbox;
      html += "</td>";
    }
    html += "</tr>";
  }
  html += "</tbody></table>";

  target.append(html).width(function() {
    return $(this).find("input:checkbox").outerWidth() * chugNames.length
  });

  target.on('change', 'input:checkbox', function() {
    var $this = $(this),
      x = $this.data('x'),
      y = $this.data('y'),
      checked = $this.prop('checked');
    alert('checkbox changed chug intersection (' + x + ', ' + y + '): ' + checked);
  });

});