HTML tablo ekranı JQuery onay kutusu tek tek değil ve verileri koruyamıyor

Question

Onay kutularının matrisini görüntülemesi gereken bazı JavaScript kodum var. Üstteki sütun başlıklarını listelemek ve ardından her bir üstbilginin altında bir onay kutusu sütunu bulunan satırları ve ayrıca boş bir başlık kutusunun altındaki satır adlarını içeren bir soldaki sütunu eklemek istiyorum. Bu sayfadaki görünüm için gidiyorum:

https://jsfiddle.net/bv01xvdf/

ilk sorun benim tablo ayrı onay kutularını görüntüleyen şudur:

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

Neredeyse çalışan bir Fiddle yazdı Satır adıyla hücreden satır. HTML'mi kontrol ettim ve doğru görünüyor ama bir yerde bir <tr> veya bir </tr> eksik olup olmadığını merak ediyorum. Böyle satır adı hücreyi (komple kodu için Fiddle bakınız) ekleyin:

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>"); 
} 

diğer sorun olduğunu ben benim "üzerinde" daha sonra eriştiğinizde veri x ve veri-y dönüş "tanımsız" yöntemi:

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

bir kutuyu, ben "onay kutusu (tanımsız, tanımsız) çak kavşak değiştirdi: true" olsun. Hangi kutunun işaretli olduğuna bağlı olarak (Halatlar, Pişirme) gibi bir şey yazdırmalıdır.

Herhangi bir yardım büyük memnuniyetle karşılanacaktır.

Answer 1

jQuery ile eklediğinizde etiket otomatik olarak kapanır. Ben b43w6ft5 de Fiddle çalıştı Hm-

$(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 ürününü düzelttim.

Kayıt için, açma dizesinde fazladan bir <th></th>, ChugName [x] için bir ek çıktı ve veri niteliklerini düzgün bir şekilde almak için attr() jQuery işlevini kullanmadınız.