जावा स्क्रिप्ट

Question

का उपयोग कर गतिशील रूप से बनाई गई पंक्ति में सीएसएस क्लास जोड़ना मेरे पास एक jsp पृष्ठ है जिसमें तालिका के पंक्तियां गतिशील रूप से जोड़े जाती हैं। यहां मैं अपने पिछले प्रश्न में से एक की तुलना में एक अलग जावा स्क्रिप्ट का उपयोग कर रहा हूं। यहां मैं तालिका कॉलम में तत्व जोड़ सकता हूं, लेकिन मैं स्टाइल क्लास को लागू नहीं कर सका जो पहले ही एक सीएसएस फ़ाइल में परिभाषित है।

मेरी जावा स्क्रिप्ट समारोह है

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

मेरे एचटीएमएल हिस्सा

<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 लागू करने की आवश्यकता है।

मैंने गुगले में कोशिश की लेकिन कुछ कोड प्राप्त किए जो स्टाइल गुणों को एक-एक करके निकाल देंगे और नई पंक्ति में कॉपी करेंगे। लेकिन यह वही नहीं है जो मुझे चाहिए, मुझे कक्षा के नाम खुद को रखना होगा।

मेरी सीएसएस हिस्सा

.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'; बुला की कोशिश है।

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