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

问题描述

我正在为我的Google Apps Script网络应用构建动态表。我正在使用materializecss表进行样式设置。该表会生成，但是我似乎无法在最后一列中加载复选框。

这是我的HTML代码：

                <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>

和我的JavaScript代码生成表格：

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

}

解决方法

根据MaterializeCSS文档https://materializecss.com/checkboxes.html，您在复选框旁边缺少一个span标签和一个label标签来包装它们，请参见代码段：

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>