Question

行将添加到表格，但样式和其他设置不起作用。我不得不求助于使用innerXml，它适用于某些项目...但由于某些原因，这确实适用于隐藏列或行样式。

通知表最初使用Razor创建。按钮启动AddRow。

我感谢任何帮助？

 function AddRow() {
    var ctl = document.getElementById("Table101");

    if (ctl != null) {
        var rowCount = ctl.rows.length;
        var i = 0;
        var row = document.createElement("tr");

        row.id = "Row".concat((rowCount).toString());
        row.style = 'border: 1px solid #C0C0C0;';
        row.innerHTML = '<tr row="Row'.concat((rowCount).toString()).concat('" style="border: 1px solid #C0C0C0;">');

        // Id  hide me...Id for new items is always 0000
        var e0 = document.createElement("input");
        e0.id = "Id".concat((rowCount).toString());
        e0.type = "text";
        e0.value = "0000";
        e0.style = "display: none;";
        e0.innerHTML = '<td id="Id'.concat((rowCount).toString()).concat('" sytle="display: none;" value="0000"><input type="text">0000</td>');
        var c0 = row.insertCell(i++);
        c0.style = "display: none;";
        c0.value = "0000";
        c0.appendChild(e0);

        // checkbox
        var e1 = document.createElement("input");
        e1.id = "Checkbox".concat((rowCount).toString());
        e1.type = "checkbox";
        e1.class = "chkBox";
        e1.style = "float:left; border: 1px solid #C0C0C0;";
        e1.innerHTML = '<td style="border: 1px solid #C0C0C0; width: 15px; height: 15px; max-width: 15px;"><input type="checkbox" style="float: left;" id="Checkbox'.concat((rowCount).toString()).concat('" class="chkBox"></td>');
        var c1 = row.insertCell(i++);            
        c1.style = "border: 1px solid #C0C0C0; width: 25px; height: 15px; max-width: 15px;";
        c1.appendChild(e1);

        // region
        var e2 = document.createElement("input");
        e2.type = "select-one";
        e2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px; ";
        e2.innerHTML = '<td style="border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;"><input type="select-one"></td>';
        var c2 = row.insertCell(i++);            
        c2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;";
        c2.appendChild(e2);

        ctl.appendChild(row);
    }
 }

根据Michael的建议更新（如下所示）......但使用column的样式属性和innerHTML，格式化效果不佳。一个，另一个，都不起作用。

function AddRow() {
    var ctl = document.getElementById("Table1");

    if (ctl != null) {
        var rowCount = ctl.rows.length;          
        var row = document.all("Table1").insertRow();

        row.id = "Row" + rowCount.toString();
        row.style = 'border: 1px double #C0C0C0;';

        // Id -- hidden
        c0 = row.insertCell();
        c0.style = "display: none;";
        c0.value = "0000";
        c0.innerHTML = '<input type="text" style="display: none;" value=0000>';

        // checkbox
        c1 = row.insertCell();
        c1.style = "border: 1px double #C0C0C0; width: 25px; height: 15px; max-width: 15px;";
        c1.innerHTML = '<input type="checkbox" style="position: relative; left: 0px;"  id="Checkbox' + rowCount.toString() + '" class="chkBox">';

        c2 = row.insertCell();
        c2.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;";
        c2.innerHTML = '<input type="text"  style="border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;">';

        c3 = row.insertCell();
        c3.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px; background-color: #FFFFFF;";
        c3.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100px; height: 15px; max-width: 15px;">';

        c4 = row.insertCell();
        c4.style = "border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;";
        c4.innerHTML = '<input type="text" style="border: 1px double #C0C0C0; width: 100%; height: 15px; max-width: 15px;">';

    }
}

Answer 1

表有自己的方法 - 使用InsertRow在行上创建新行和insertCell以创建新单元格。可以找到一个示例here。

此外，您不会通过style设置样式。相反，您可以单独设置属性，例如：

c1.style.border = '1px solid #C0C0C0';

或通过cssText属性，如：

row.style.cssText = 'border: 1px solid #C0C0C0;';

Answer 2

由于您使用DOM操作对象，因此您不必使用 innerHTML ！ innerHTML 设置标记内的HTML内容，而不是标记本身。这样，您将标记嵌套两次！

字符串之间的 concat 是什么？使用加：

row.id =“Row”.concat（（rowCount）.toString（））; //不！

row.id =“Row”+ rowCount;

无法在javascript中正确添加行到表

2 个答案: