У меня есть страница jsp, в которой строки таблицы добавляются динамически. Здесь я использую другую java script, чем в предыдущем вопросе. Здесь я мог добавлять элементы в столбцы таблицы, но я не мог применить класс стиля, который уже определен в файле css.
моя функция java script
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 во вновь созданных строках.
Я попробовал в googled, но получил некоторые коды, которые будут извлекать атрибуты стиля по одному и копировать в новую строку. Но это не то, что я хочу, мне нужно поставить имена классов сами.
Моя часть css
.formlabel{ /* fields label 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 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 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;}