Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

I could not post my question in stack overflow, Can anyone please help me to post it in stack overflow?????

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

I got the answer

var newcell = row.insertCell(i); newcell.innerHTML ='<h4>Policy 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'; 
share|improve this question
Can you post the css also? – toomanyairmiles Feb 2 '12 at 7:42
@toomanyairmiles I have added the css – Sarin Jacob Sunny Feb 2 '12 at 7:47
How are you adding the css to the page, more importantly WHEN is it applied - which renders first, your dynamic code or the CSS – toomanyairmiles Feb 2 '12 at 7:50
currently I dont have the code for adding class into the dynamic rows.. I need to add the classes while creating the rows itself.. – Sarin Jacob Sunny Feb 2 '12 at 8:39
@ danlefree I am not allowed to post questions to stack overflow, thats y I posted it here and asked help to migrate it by flagging it myself... Then?????????? Its really sad... – Sarin Jacob Sunny Feb 2 '12 at 8:48
show 4 more comments

closed as off topic by danlefree Feb 2 '12 at 8:29

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

Browse other questions tagged or ask your own question.