Agregar clase css a una fila creada dinámicamente mediante el script java

Tengo una página jsp en la que las filas de una tabla se agregan dinámicamente. Aquí estoy usando una secuencia de comandos de Java diferente a la de mi pregunta anterior. Aquí podría agregar elementos a las columnas de la tabla, pero no pude aplicar la clase de estilo que ya está definida en un archivo css.Agregar clase css a una fila creada dinámicamente mediante el script java

mi función java script es

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

Mi parte HTML es

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

tengo que aplicar la misma clases de estilos FormLabel, formfield y formgap en las filas de nueva creación también.

Intenté en Google pero obtuve algunos códigos que extraerán los atributos de estilo uno por uno y los copiarán en una nueva fila. Pero eso no es lo que quiero, necesito poner los nombres de clase en sí.

mi parte css es

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

Fuente

2012-02-02 Anonymous

Así como una nota, parece que se está configurando un atributo 'id' en uno de los elementos creados de forma dinámica, pero sólo utiliza un valor estático. Los ID de los elementos deben ser únicos. –

¿Has probado newcell.class = newcell.className = "yourclass"? – Candide

La clase (s) de un elemento se almacena en la propiedad className, a fin de tratar de llamar newcell.className = 'yourclassname'; de las celdas que desea agregar una clase a.

Fuente

2012-02-02 09:24:17

@sarin Me alegra que funcione. Sin embargo, si una de las dos respuestas proporcionadas le ayudó a resolver su problema, estoy confundido sobre por qué no aceptó una de ellas como la respuesta, y en su lugar opté por publicar su código que funciona ahora como una respuesta y acepto eso. .. –

favor ver también esta pregunta .. http://stackoverflow.com/q/9110044/1184697 –

me han votado para el cargo más antigua única .. –

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

Fuente

2012-02-02 09:32:21

Gracias a su trabajo –

favor mirar en también esta pregunta .. http://stackoverflow.com/q/9110044/1184697 –

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

Fuente

2012-02-02 09:38:55

favor mirar en también esta pregunta .. http://stackoverflow.com/q/9110044/1184697 –

Agregar clase css a una fila creada dinámicamente mediante el script java

Respuesta

Cuestiones relacionadas