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
– Anthony Grist, Commented Feb 2, 2012 at 9:22
Did you try newcell.class = newcell.className = "yourclass" ? — Roland Mai
– Roland Mai, Commented Feb 2, 2012 at 9:25

Anthony Grist · Accepted Answer · 2012-02-02 09:24:17Z

50

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 2, 2012 at 9:24

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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
– Anthony Grist

02/02/2012 09:47:24
Commented Feb 2, 2012 at 9:47
Please look into this questions also.. stackoverflow.com/q/9110044/1184697

user1184697
– user1184697

02/02/2012 09:49:43
Commented Feb 2, 2012 at 9:49
I was trying with cell.addClass(<className>) and it was not working, Thanks for your example, that worked !!!

Ambuj
– Ambuj

03/18/2015 10:36:39
Commented Mar 18, 2015 at 10:36

Add a comment |

Sam Greenhalgh · Accepted Answer · 2012-02-02 09:32:21Z

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.. stackoverflow.com/q/9110044/1184697 — user1184697
– user1184697, Commented Feb 2, 2012 at 9:50

Sarin Jacob Sunny · Accepted Answer · 2012-02-08 10:31:53Z

1

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

edited Feb 8, 2012 at 10:31

answered Feb 2, 2012 at 9:38

Sarin Jacob Sunny

2,1363 gold badges29 silver badges61 bronze badges

1

Please look into this questions also.. stackoverflow.com/q/9110044/1184697

user1184697
– user1184697

02/02/2012 09:51:35
Commented Feb 2, 2012 at 9:51

Add a comment |

Collectives™ on Stack Overflow

Adding css class to a dynamically created row using java script

3 Answers 3

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related