使用Java脚本将CSS类添加到动态创建的行中 [英] Adding css class to a dynamically created row using java script
问题描述
我有一个jsp页面，其中动态添加了表的行.在这里，我使用的Java脚本与上一个问题中的Java脚本不同.在这里，我可以将元素添加到表列中，但是不能应用已经在css文件中定义的样式类.
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.
我的Java脚本函数是
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 </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 </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 </h4></td>
<td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
<td class="formgap"></td>
<td class="formlabel"><h4>Description </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"> </td>
<td class="formfield"> </td>
<td class="formgap"></td>
<td class="formlabel"> </td>
<td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
</tr>
</table>
我还需要在新创建的行中应用相同的样式类formlabel，formfield和formgap.
I need to apply the same styles classes formlabel, formfield and formgap in the newly created rows also.
我在google中尝试过，但是得到了一些代码，这些代码将一个接一个地提取样式属性并复制到新行.但这不是我想要的，我需要输入类名本身.
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.
我的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;}
推荐答案
元素的类存储在 className 属性中，因此请尝试调用 newcell.className ='yourclassname'; 表示要向其中添加类的单元格.
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.
这篇关于使用Java脚本将CSS类添加到动态创建的行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
