无法在我的 javascript 生成的 materializecss 表中加载复选框

Question

I am building a dynamic table for my Google Apps Script web app. I am using the materializecss table for my styling. The table generates but I can't seem to get a checkbox to load in the last column.

Here is my HTML code:

                <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
                <table id="myTable" class="highlight">
                <tr class="header">
                
                <th>First Name</th>
                <th>Surname</th>
                <th>Current Housepoints</th>
                <th>Award Housepoints</th>
                <th>Behaviour</th>
                </tr>
                <tbody id = "table-body">
                
                
                
                </tbody>
                </table>

and my javascript code to generate the table:

function displayPupils(dataArray) {

    var tbody = document.getElementById("table-body");

    dataArray.forEach(function(r) {
    var pupilID = r[0];
    pupilIds.push(pupilID);
    var row = document.createElement("tr");
     
    var col2 = document.createElement("td");
    col2.textContent = r[1];
    var col3 = document.createElement("td");
    col3.textContent = r[2];
    var col4 = document.createElement("td");
    col4.textContent = r[3];
    var col5 = document.createElement("td");
    var y = document.createElement("div");
    y.setAttribute("class", "input-field col s2");
    var x = document.createElement("INPUT");
    x.setAttribute("type", "number");
    
    x.setAttribute("class", "validate");
    x.setAttribute("id", pupilID);
    x.setAttribute("value", "Assign");
    


    var col6 = document.createElement("td");
    
    var checkBox1 = document.createElement("INPUT");
    checkBox1.setAttribute("id", pupilID+"Op1");
    checkBox1.type = "checkbox";
    checkBox1.setAttribute("class","browser-default");
    checkBox1.setAttribute("checked", "checked");
    
    col6.appendChild(checkBox1);
    col5.appendChild(y);
    y.appendChild(x);
   
    row.appendChild(col2);
    row.appendChild(col3);
    row.appendChild(col4);
    row.appendChild(col5);
    row.appendChild(col6);
    tbody.appendChild(row);
    
})

}

Answer 1

According to MaterializeCSS docs https://materializecss.com/checkboxes.html you're missing a span tag beside the checkbox and a label tag to wrap them all, see the snippet:

 function displayPupils(dataArray) { var tbody = document.getElementById("table-body"); dataArray.forEach(function(r) { var pupilID = r[0]; pupilIds.push(pupilID); var row = document.createElement("tr"); var col2 = document.createElement("td"); col2.textContent = r[1]; var col3 = document.createElement("td"); col3.textContent = r[2]; var col4 = document.createElement("td"); col4.textContent = r[3]; var col5 = document.createElement("td"); var y = document.createElement("div"); y.setAttribute("class", "input-field col s2"); var x = document.createElement("INPUT"); x.setAttribute("type", "number"); x.setAttribute("class", "validate"); x.setAttribute("id", pupilID); x.setAttribute("value", "Assign"); var col6 = document.createElement("td"); var checkBox1 = document.createElement("INPUT"); checkBox1.setAttribute("id", pupilID+"Op1"); checkBox1.type = "checkbox"; checkBox1.setAttribute("class","browser-default"); checkBox1.setAttribute("checked", "checked"); // Add a label and a span var label = document.createElement('label'); label.append(checkBox1); label.append(document.createElement('span')); col6.appendChild(label); col5.appendChild(y); y.appendChild(x); row.appendChild(col2); row.appendChild(col3); row.appendChild(col4); row.appendChild(col5); row.appendChild(col6); tbody.appendChild(row); }) } const pupilIds = [] displayPupils([ [1, 'John', 'Doe', '8'] ])

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <table id="myTable" class="highlight"> <tr class="header"> <th>First Name</th> <th>Surname</th> <th>Current Housepoints</th> <th>Award Housepoints</th> <th>Behaviour</th> </tr> <tbody id = "table-body"> </tbody> </table>