Thêm lớp css vào hàng được tạo động bằng cách sử dụng tập lệnh java

Question

Tôi có trang jsp trong đó các hàng của bảng được thêm động. Ở đây tôi đang sử dụng một tập lệnh java khác với kịch bản trong câu hỏi trước của tôi. Ở đây tôi có thể thêm các phần tử vào các cột trong bảng, nhưng tôi không thể áp dụng lớp kiểu đã được định nghĩa trong một tệp css.

chức năng java script của tôi là

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

phần HTML của tôi là

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

tôi cần phải áp dụng cùng một phong cách lớp formlabel, formfield và formgap trong các hàng mới được tạo ra cũng có.

Tôi đã cố gắng googled nhưng có một số mã sẽ trích xuất các thuộc tính phong cách từng cái một và sao chép sang hàng mới. Nhưng đó không phải là điều tôi muốn, tôi cần phải tự đặt tên lớp.

phần css TÔI đang

.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

Lớp (es) của một phần tử được lưu trữ trong các className tài sản, vì vậy hãy thử gọi newcell.className = 'yourclassname'; cho các tế bào mà bạn muốn thêm một lớp học để.

Answer 2

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

Answer 3

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