Cannot correctly add row to table in javascript
<p>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.</p>

<p>Notice table initially create using Razor.  A button initiates AddRow.</p>

<p>I appreciate any help?  </p>

<pre><code> 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 = '&lt;tr row="Row'.concat((rowCount).toString()).concat('" style="border: 1px solid #C0C0C0;"&gt;');

        // 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 = '&lt;td id="Id'.concat((rowCount).toString()).concat('" sytle="display: none;" value="0000"&gt;&lt;input type="text"&gt;0000&lt;/td&gt;');
        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 = '&lt;td style="border: 1px solid #C0C0C0; width: 15px; height: 15px; max-width: 15px;"&gt;&lt;input type="checkbox" style="float: left;" id="Checkbox'.concat((rowCount).toString()).concat('" class="chkBox"&gt;&lt;/td&gt;');
        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 = '&lt;td style="border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;"&gt;&lt;input type="select-one"&gt;&lt;/td&gt;';
        var c2 = row.insertCell(i++);            
        c2.style = "border: 1px solid #C0C0C0; width: 100px; height: 15px; max-width: 15px;";
        c2.appendChild(e2);

        ctl.appendChild(row);
    }
 }
</code></pre>

<p>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.</p>

<pre><code>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 = '&lt;input type="text" style="display: none;" value=0000&gt;';

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

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

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

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

    }
}
</code></pre>
