Agregar clase a tbody

alexa12 · #1 (**permalink**) 07/06/2012, 08:33

Hola a tod@s! espero puedan apoyarme

Les comento que tengo una tabla dinamica a la que voy agregando filas y columnas con la sentencia:

tablaId.tBodies[0].appendChild(renglon);

En el body de la pagina como ven en la tabla he declarado solo el titulo de las columnas ya que de forma dinamica le voy agregando los datos por fila y columna, mi problema es al tratar de asignarle al tbody una clase, ya que esa clase hace que en el tbody de la tabla se genere un scroll. Ya resuelto el problema lo que deberia generarse (dinamicamente) sería algo como:
<tbody class="scrollContent"></tbody>

¿Como puedo asignar dinamicamente una clase (estilo) al tbody?

<body>
<table width="700" height="160" border="1" id=" tablaId">

<tr>
<th scope="col" >MATERIAL</th>
<th scope="col" class= "titulo">ID </th>
<th scope="col">CANT</th>
<th scope="col">EMP</th>
<th scope="col">TIPO</th>
</tr>

</table>
</body>

Muchas gracias!!

emprear · #2 (**permalink**) 07/06/2012, 14:51

En primer lugar, bienvenido/a a FDW alexa12

tu tabla no tiene ningún tbody

De tenerlo, es semanticamente incorrecto si no se lo asocia a un tfoot y thead,

un tbody puede ser estillizado con css ó con javascript

mencionás una clase scrollContent de la que no se tienen noticias

no se entiende para nada tu problema, expresado como está

por si te sirve

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>tb</title>
<style type="text/css">
/*<![CDATA[*/
thead {color:green}
tbody {color:blue; font-family: arial;}
tfoot {color:red}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function tb(){
document.getElementById('cuerpo').style.fontWeight = 'bold';
}
window.onload = tb;
//]]>
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>
AAA
</th>
<th>
BBB
</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
</tfoot>
<tbody id="cuerpo">
<tr>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
</tbody>
</table>
</body>
</html>

alexa12 · #3 (**permalink**) 08/06/2012, 10:48

Hola Emprear gracias por tu respuesta, espero ahora explicarme mejor:

Como decía las columnas y filas asi como el tbody son dinamicos. Lo unico que declaro en el body es:

<table width="700" height="160" border="1" id="idTabla">
<tr >
<th scope="col" >MATERIAL</th>
<th scope="col" class= "titulo">COLOR</th>

</tr>
</table>

En las funciones JavaScript genero el contenido de la tabla: idTabla

function genera(){
varTabla = document.getElementById('idTabla');

for(var i = 1; i<=aValores.length;i++){

renglon = document.createElement('tr');
//creo un campo text
textM = crearInput();

for(var c = 1; c <= columnas;c++){
celda = document.createElement('td');
celda.setAttribute("class","input");
if (c==1){
celda.appendChild(textM);
}

//a la fila agrego
renglon.appendChild(celda);

}

}

varTabla.tBodies[0].appendChild(renglon);

}

Al final le asigno al tbodies una nueva fila
varTabla.tBodies[0].appendChild(renglon);

y asi voy sucesivamente, de esta misma forma puedo asignarle una clase?

Ejemplo: (suponiendo fuera correcto)
varTabla.tBodies[0].appendClass(classname); ??

Gracias!!

elgoncho99 · #4 (**permalink**) 08/06/2012, 11:34

Buenas, podrias probar esto.
Funciona con casi cualquier objeto javascript, incluso tablas, tbody, thead y tfoot.

Código Javascript:

Ver originalobjHTML.classname = 'claseCSS';

Espero sirva saludos.

emprear · #5 (**permalink**) 08/06/2012, 12:08

@elgoncho99
Te recuerdo que javascript es "case sensitive", y el nombre de la propiedad es
className
y no
classname
Por supuesto podemos usar classname si lo interpretamos como una variable

ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.rojo{
color: red;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function crear_Capa(){
var capa = document.createElement( 'div' );
capa.innerHTML = "texto";
capa.className = "rojo";
capa.setAttribute('title', 'div con texto rojo');
document.body.appendChild(capa);
}
window.onload = crear_Capa;
//]]>
</script>
</head>
<body>
</body>
</html>

SAludos

alexa12 · #6 (**permalink**) 11/06/2012, 19:08

Muchas gracias a ambos, a la final use la forma objHTML.classname = 'claseCSS';

Saludos