如何使用Materialize表格中的複選框

Question

我正在使用Materialise，並試圖製作一個包含複選框的表格。但是，似乎有一個問題。包含在表格中的複選框似乎不起作用。我不知道這是否一個錯誤，或者如果我不這樣做正確的事：

<form action="#"> 
    <table> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>My Label</td> 
     <td><input type="checkbox" class="filled-in" /><label></label></td> 
     </tr> 
    </tbody> 
    </table> 
</form> 

如何使含有使用Materialise的一個表中的複選框？

http://jsfiddle.net/qa37un79/

Answer 1

你沒有爲複選框標籤的id和匹配for屬性：

<input type="checkbox" id="myCheckbox" class="filled-in" /> 
<label for="myCheckbox"></label> 

http://jsfiddle.net/xcmsLee9/1/

Answer 2

我已經寫了一小段代碼，這將改變使用複選框嵌套對象數組的數據，因此如果您不想查看任一列，只需選擇或取消選擇它即可。

// Using the Materilize css Check boxes change the functionality of the check bocx accordingly 








var tab= document.getElementById("TransformTable"); 
//Get The No of Cols from the JSON data 
var NoOfCols=Object.getOwnPropertyNames(data[0]); //Insert the row for the table headings var row = tab.insertRow(0); //set the attribute row.setAttribute("id",0+"_row"); /** * Loop for No of Cols and set the heading and append the CheckBox */ for(var i=0;i<NoOfCols.length;i++){ var cell1 =row.insertCell(i); cell1.setAttribute("id","0_row"+i+"_cell"); cell1.innerHTML="<b>"+NoOfCols[i]+"</b>"; 

    $("#checkBoxDiv").append("<input type='checkbox' id="+i+" checked='checked' style='margin:10px;'/><label for="+i+" style='margin-right:10px;'>"+NoOfCols[i]+"</label>"); } /** *Loop for the Table data */ // Loop for the no Of rows for(var j=0;j<data.length;j++){ var row2=tab.insertRow(j+1); row.setAttribute("id",(j+1)+"_row"); // Lopp for the No of Cols in a row for(var k=0;k<NoOfCols.length;k++){ var cell2=row2.insertCell(k); cell2.setAttribute("id",(j+1)+"_row"+k+"_cell"); cell2.innerHTML=data[j][NoOfCols[k]]; } } /** event Listener for the check Boxes */ $("input").click(function(event){ var id = event.target.id; if($("#"+id).prop("checked")){ DisplayTable(id); }else{ HideTable(id); } }); /** * [HideTable Hide the col of a table] 

    */ function HideTable(id){ var ColId =id; for(var t=0;t<=data.length;t++){ $("#"+t+"_row"+ColId+"_cell").css("display","none"); } } /** * [DisplayTable Display the col of a table] 

    */ function DisplayTable(id){ var ColId =id; for(var t=0;t<=data.length;t++){ $("#"+t+"_row"+ColId+"_cell").css("display","table-cell"); } }