Question

Row will add to table but styles and other settings don’t work. I had to resort to using innerXml which works for some items…But for some reason this does work for hidding columns nor row style.

Notice table initially create using Razor. A button initiates AddRow.

I appreciate any help?

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

Updated (shown below) based on Michael’s suggestion…but the formating does not work well using both column’s style property and the innerHTML. One, other, and both do not work.

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

Tables have their own methods – you use InsertRow to create a new row and insertCell on the row to create a new cell. An example can be found here.

Also, you do not set the style through style. Instead you either set properties individually, such as:

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

or through the cssText property, as in:

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