HTML表格显示JQuery复选框而不保留数据

Question

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

http://codepen.io/marclundgren/pen/hgelI

我写了一个小提琴，几乎工作：

https://jsfiddle.net/bv01xvdf/

的第一个问题是，我的表显示在一个单独的复选框从行名称的单元格行。我检查了我的HTML，它似乎是正确的，但我想知道我是否在某处丢失了<tr>或</tr>。我想补充的行名小区像这样（见完整代码的小提琴）：

var chugNames = ["Ropes", "Cooking", "Outdoor Cooking"]; 
for (x = 0; x < chugNames.length; x++) { 
    // Add a row for each name.        
    target.append("<tr><td>" + chugNames[x] + "</td>"); 
    for (y = 0; y < chugNames.length; y++) { 
     target.append("<td><input type=\"checkbox\" />"); 
     checkbox = $('</input>', { 
     'type': 'checkbox', 
     'data-x': chugNames[x], 
     'data-y': chugNames[y], 
     }); 
     target.append(checkbox); 
     target.append("</td>"); 
    } 
    target.append("</tr>"); 
} 

的另一个问题是数据X和数据-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); 
    }); 

当我检查一个框，我得到“复选框更改楚格相交（undefined，undefined）：true”。它应该打印像（绳索，烹饪）的东西，取决于哪个盒子被检查过。

任何帮助将不胜感激。

Answer 1

当你附加jQuery时，标签会自动关闭。

check the jsfiddle

试试这个：

$(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); 
    }); 

}); 

Answer 2

我修好了您的jsfiddle here。

为了记录，您有一些问题，在开始字符串中额外输入<th></th>，额外输出ChugName [x]，并且您没有使用attr() jQuery函数正确获取数据属性。