Adding css class to a dynamically created row using java script

Question

I have a jsp page in which rows of a table are added dynamically. Here I am using a different java script than the one in my previous question. Here I could add elements into table columns, but I could not apply style class which is already defined in a css file.

my java script function is

function addrow(tableID) {
    try{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount-1);


    var i=0;
    var newcell = row.insertCell(i);
    newcell.innerHTML ='<h4>Type &nbsp;&nbsp;&nbsp;</h4>';

    i++;
    newcell = row.insertCell(i);
    newcell.innerHTML ='<input type="text" name="type7" id="type8" size="30"/>';
    i++;
    newcell = row.insertCell(i);
    newcell.innerHTML ='';
    i++;
    newcell = row.insertCell(i);
    newcell.innerHTML ='<h4>Description &nbsp;&nbsp;&nbsp;</h4>';
    i++;
    newcell = row.insertCell(i);
    newcell.innerHTML ='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';

}catch(e) {
    alert(e);
}
}

My HTML part is

<table id="table1" width="792" border="0">

<tr class="rowdiv">
      <td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
      <td class="formgap"></td>
      <td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
      </tr>

      <tr class="rowdiv">
        <td width="170" class="formlabel">&nbsp;</td>
        <td class="formfield">&nbsp;</td>
        <td class="formgap"></td>
        <td class="formlabel">&nbsp;</td>
        <td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
      </tr>

    </table>

I need to apply the same styles classes formlabel, formfield and formgap in the newly created rows also.

I tried in googled but got some codes which will extract the style attributes one by one and copy to new row. But that is not what I want, I need to put the class names itself.

MY css part is

.formlabel{                         /* fields label's style  */
    text-align: right;
    font:Verdana, Geneva, sans-serif; font-weight: lighter;
    margin: 0px;
    padding: 0px;
    text-transform: capitalize;
    color:#000000;
}
.formlabel a{                           /* fields label's style  */
    text-align: right;
    font:Verdana, Geneva, sans-serif; font-weight: bold;
    margin: 0px;
    padding: 0px;
        text-decoration:none;
    text-transform: capitalize;
    color:#FF0000;
}
.formlabel a:HOVER{                         /* fields label's style  */
    text-align: right;
    font:Verdana, Geneva, sans-serif; font-weight: bold;
    margin: 0px;
    padding: 0px;
        text-decoration:none;
    text-transform: capitalize;
    color:navy;
}
.formfield {                            /* field style */
    text-align: left;
    margin-left:1px;
    font:Verdana, Geneva, sans-serif;
    text-transform: capitalize;

    color:#000000;
}
.formfield textarea{                            /* field style */
    text-align: left;
    margin-left:1px;
    font:Verdana, Geneva, sans-serif;
    text-transform: none;
width:185px;
    color:#000000;
}
.formfield a{                           /* field style */
    text-align: left;
    margin-left:1px;
    font:Verdana, Geneva, sans-serif; font-weight: bold;
        text-decoration:none;
    text-transform: capitalize;
    color:#FF0000;
}
.formfield a:HOVER{                         /* field style */
    text-align: left;
    margin-left:1px;
    font:Verdana, Geneva, sans-serif; font-weight: bold;
        text-decoration:none;
    text-transform: capitalize;
    color:navy;
}
.loginformfield {                           /* field style */
    text-align: left;
    margin-left:1px;
    font:Verdana, Geneva, sans-serif;
}
.formfield input {text-transform: capitalize;`font:Verdana, Geneva, sans-serif;}

.formlabel h5{margin: opx;padding: opx; font-weight: lighter;}
.formfield h6{margin: opx;padding: opx; font-weight: lighter;}

Just as a note, it looks like you're setting an `id` attribute on one of the dynamically created elements, but you're just using a static value. IDs on elements need to be unique. — Anthony Grist, Feb 02 '12 at 09:22
Did you try newcell.class = newcell.className = "yourclass" ? — Candide, Feb 02 '12 at 09:25

score 48 · Accepted Answer · answered Feb 02 '12 at 09:24

48

The class(es) of an element are stored in the className property, so try calling newcell.className = 'yourclassname'; for the cells you want to add a class to.

answered Feb 02 '12 at 09:24

Anthony Grist

38,173
8
62
76

1

@sarin I'm glad it works. However, if one of the two answers provided helped you solve your problem, I'm confused as to why you didn't accept one of those as the answer, and instead opted to post your now working code as an answer and accept that... – Anthony Grist Feb 02 '12 at 09:47
Please look into this questions also.. http://stackoverflow.com/q/9110044/1184697 – Feb 02 '12 at 09:49
I was trying with cell.addClass() and it was not working, Thanks for your example, that worked !!! – Ambuj Mar 18 '15 at 10:36

score 4 · Answer 2 · answered Feb 02 '12 at 09:32

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
row.className = "rowdiv";

var i=0;
var newcell = row.insertCell(i);
newcell.innerHTML ='<h4>Type &nbsp;&nbsp;&nbsp;</h4>';
newcell.className = "formlabel";

i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<input type="text" name="type7" id="type8" size="30"/>';
newcell.className = "formfield";

i++;
newcell = row.insertCell(i);
newcell.innerHTML ='';
newcell.className = "formgap";

i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<h4>Description &nbsp;&nbsp;&nbsp;</h4>';
newcell.className = "formlabel";

i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
newcell.className = "formfield";

Please look into this questions also.. http://stackoverflow.com/q/9110044/1184697 — , Feb 02 '12 at 09:50

Sarin Jacob Sunny · Answer 3 · 2012-02-08T10:31:53.670

var newcell = row.insertCell(i);
newcell.innerHTML ='<h4>Type &nbsp;&nbsp;&nbsp;</h4>';
newcell.className = 'formlabel';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<input type="text" name="type7" id="type8" size="30"/>';
newcell.className = 'formfield';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='';
newcell.className = 'formgap';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<h4>Description &nbsp;&nbsp;&nbsp;</h4>';
newcell.className = 'formlabel';
i++;
newcell = row.insertCell(i);
newcell.innerHTML ='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
newcell.className = 'formfield';

Please look into this questions also.. http://stackoverflow.com/q/9110044/1184697 — , Feb 02 '12 at 09:51

Adding css class to a dynamically created row using java script

3 Answers3

Linked