Cannot correctly add row to table in javascript

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;">';

    }
}

You should really use no inline styles, but CSS.

Bergi
– Bergi

2012-07-08 19:43:23 +00:00
Commented Jul 8, 2012 at 19:43 — Bergi
– Bergi, Commented Jul 8, 2012 at 19:43

Michael · Accepted Answer · 2012-07-09 01:19:58Z

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

edited Jul 9, 2012 at 1:19

answered Jul 8, 2012 at 5:54

Michael

9,0383 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mad moe Over a year ago

Thanks for the feedback but it does not appear to work any better. The formatting will not take.

acondolu · Accepted Answer · 2012-07-08 06:09:38Z

1

Since you're manipulating object with DOM, you don't have to use innerHTML! innerHTML sets the HTML content inside the tag, not the tag itself. That way, you're nesting your tags two times!
What's concat between strings? Use plus:

row.id = "Row".concat((rowCount).toString()); // NO!

row.id = "Row" + rowCount;

answered Jul 8, 2012 at 6:09

acondolu

3331 silver badge9 bronze badges

Collectives™ on Stack Overflow

Cannot correctly add row to table in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related