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.
Did you try newcell.class = newcell.className = "yourclass" ?

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

up vote 3 down vote accepted

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 '12 at 9:24

Anthony Grist
14.9k1026

1

Thanks it works – user1184697 Feb 2 '12 at 9:37

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 2 '12 at 9:47

Please look into this questions also.. stackoverflow.com/q/9110044/1184697 – user1184697 Feb 2 '12 at 9:49

1

I have voted to the oldest post only.. – user1184697 Feb 2 '12 at 14:19

Sam Greenhalgh · Answer 2 · 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

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

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

asked	1 year ago
viewed	3348 times
active	1 year ago

Adding css class to a dynamically created row using java script

3 Answers

Your Answer

Hello World!

Linked

Adding css class to a dynamically created row using java script

3 Answers

Your Answer

Hello World!

Linked

Related