使用java脚本将css类添加到动态创建的行

Question

我有一个jsp页面,其中动态添加了表的行.在这里,我使用的是与前一个问题不同的java脚本.在这里,我可以将元素添加到表列中,但我无法应用已在css文件中定义的样式类.

我的java脚本函数是

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

我的HTML部分是

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

我还需要在新创建的行中应用相同的样式类formlabel,formfield和formgap.

我尝试使用Google搜索,但获得了一些代码,这些代码将逐个提取样式属性并复制到新行.但这不是我想要的,我需要把类名本身.

我的css部分是

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

Answer 1

元素的类存储在className属性中,因此请尝试调用newcell.className = 'yourclassname';要添加类的单元格.