modificar codigo javascript

[roboty]

hola amigos tengo un problema tengo un codigo que me cambia el color de la tabla los pares de un color y los impares de otro color algo asin:

Código Javascript:

<script type='text/javascript'>
(function(){
var d = document, e = d.getElementsByTagName("table"), i;
 
for(i=0;i<e.length;i++){
 if(i % 2) e[i].style.backgroundColor = '#333'
 else e[i].style.backgroundColor = '#fff'
}
})()
 

mi problema es que tengo una tabla dentro de otra y yo quiero asignarle el color de fondo la tabla principal para que el color este en todo el div algo asin:

Código HTML:

<table>
           <tbody>
                    <tr>
                        <td>articulo1</td>  <td>articulo2</td>  <td>
    <table>
            <tbody>
                     <tr>
                        <td>nombre</td>
                    </tr>
                    <tr>
                        <td>caracteristicas</td>
                    </tr>
            </tbody>
    </table>
                                               </td>
                    </tr>  
            </tbody>
</table>
 
</div>
 

osea que el color de fondo este para todo el div

[ceSharp]

hola roboty,
puedes hacer lo siguiente:
asigna un ID a la tabla de fuera, y la última linea de tu función JS que sea:

document.getElementById('tabla1').style.background Color = 'green';
así todo se pintará de varios colores, pero la última función buscará el ID de la tabla de fuera y pintara el fondo a tu gusto, independientemente de los colores alternos de cada TR.

prueba y nos cuentas.

salu2.

[roboty]

hola ceSharp gracias por contestar no se porque pero no funciono yo a la tabla de afuera le asinge un id asin
<tabla id='tabla1>
......
...
..
<table>
y la linea la cambie como me dijistes
document.getElementById('tabla1').style.background Color = 'green';

pero no me funciono que hice algo mal

[roboty]

espero que algun experto en javascript me pueda ayudar

[ceSharp]

Hola roboty. Ahora que lo leo bien y pruebo tu código me he dado cuenta que no te entendí bien antes, sorry.
Bueno, por lo que he visto, si tu función javascript la estabas metiendo tal cual la tienes en tu página, no creo que te funcionara; ni con mi línea ni sin ella. Deberías de poner así tu función javascript:
<script type="text/javascript">
window.onload=function()
{
var e = document.getElementsByTagName("table");
var color = 0;
for(i=0;i<e.length;i++)
{
if(e[i].id!='tabla1')
{
if(color==0)
e[i].style.backgroundColor = 'red';
else
e[i].style.backgroundColor = 'yellow';
if(color==1)
color=0;
else
color=1;
}
else
e[i].style.backgroundColor='green';
}

}
</script>
Con la variable 'color' sabemos qué color tienes que poner en cada momento: si es cero=amarillo, si es uno=rojo. Luego comprobamos la variable 'color' para resetearla cada vez que llega a 1. He añadido una nueva tabla, para que veas el efecto de pintar dos colores. Además te he cambiado los colores para que veas el efecto (porque con #333 y #fff se veía siempre igual). Quedarían asi tus tablas HTML:
<div>
<table id="tabla1">
<tbody>
<tr>
<td>
articulo1</td>
<td>
articulo2</td>
<td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
nombre</td>
</tr>
<tr>
<td>
caracteristicas</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
nombre</td>
</tr>
<tr>
<td>
caracteristicas</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Para este ejemplo te he retocado un poco las tablas. Entiendo tu intención pero así como
tú las tienes no parecen estar bien formadas, a ver qué te parece como yo te las he puesto.
Y los colores también modifícalos a tu gusto; te he puesto esos para que veas claramente el efecto.

saludos.

[roboty]

hola ceSharp esta muy bien el codigo que posteastes pero realmente no es lo que quiero exactamente
yo las tablas las puse asin porque queria que la imagen quede a la izquierta y los ariculos con su comentario a la derecha pero esto es lo de menos lo mas importante es que yo quiero todo del mismo color y en el siguiente registro que se ponga otro color asin relativamente estilo zebra no se si me explique bien?
piensa que yo esta tabla la utilizo para mostrar en pantalla todos los registros entonces quiero que quede tipo zebra pero solo un color espero me puedas ayudar y me haigas entendido amigo

[roboty]

ceSharp si te fijas en el codigo que postee arriba lo que hace la funcion javascript es a los impares le asigna un color y a los pares otro color entonces queda estilo zebra pero mi problema es que no funciona bien debido a que tiene dos tablas si fuera una sola tabla iria perfecto entiendes ahora mi problema espero que me puedas ayudar amigo un saludo

y por cierto el codigo que postee si me funciona pero solo me da color a una tabla no a todo

[ceSharp]

hola roboty,

pfff... pues muy bien no te entiendo... ¿no será que quieres cambiar de color los TR de cada tabla?
es decir, que donde según tu tabla dice 'nombre' sea de un color, y donde dice 'características' sea de otro.
en ese caso no puedes coger los elementos por TAG con 'table', porque entonces te pinta toda la tabla de ese color. Tendrías que coger los elementos por TR:
var e = document.getElementsByTagName("tr");
si es eso, prueba con esa línea, y ya sobre este cambio trata de modificarlo a tu gusto (con tu función, porque la mía descarta la tabla principal por el ID='tabla1')

espero haberte ayudado.

saludos.

[roboty]

ceSharp quiero darle un color de fondo a la tabla principal osea a todo los datos y despues en la siguiente capa darle otro color o simplemente quitarle el color que tiene y que se quede sin color asin relativamente estilo zebra espero haberme explicado


otra cosa yo realmente quiero pintar todo de un color no solo los tr

[ceSharp]

vamos a ver,
tú quieres que tu tabla principal sea de un color, y el resto de tablas de un mismo color TODAS, pero que no coincida con el color de la tabla principal, ¿es eso?
si es así, no te va a hacer falta javascript en ningún momento. a la tabla principal le das un color con style="background-color:green" y el resto de tablas sin style. si las tablas se crean dinamicamente no te hace falta saber cuántas tablas hay. A la principal le das color y al resto no. si quieres que se vea bien el efecto cebra, tendras que poner TR vacíos de tu tabla principal que diferencien unas tablas de otras.
Entendía el bucle for como el que se encargaba de alternar colores, pero si las quieres todas del mismo color no te va a hacer falta.

una vez más, si he ententido bien lo que quieres hacer, claro está :)

salu2.

[roboty]

no es eso ceSharp soy yo que me explico mal te cuento

yo a traves de php muestro los resultados de mi db asin
en la capa div

esto que significa que esta capa div se utilizar para mostrar en pantalla todos los registros osea que se autoincrementaran los div en pantalla bien tal y como esta no se diferencia ya que tienen el mismo color y con el codigo que postee arriba solo me da color a una tabla osea a un trozo de mi capa y yo quiero a toda la capa y despues que se quite el color de fondo en la siguiente o que se ponga otro color estilo zebra pero entre capa y capa me entendistes ahora amigo

[ceSharp]

antes estaba confundido, porque si asignas color a una tabla y a las que están dentro no, hereda el color de la tabla principal.
vamos a ver, echa un vistazo a este código, que es mezcla de lo tuyo y de lo mío :)
------------

var e = document.getElementsByTagName("table");

var color = 0;

for(i=0;i<e.length;i++)

{

if(e[i].id!='tabla1')

{

e[i].style.backgroundColor = 'white';



}

else

e[i].style.backgroundColor='green';

}
------------------------
con esto vamos a recoger todas las etiquetas TABLE dentro de un FOR y las pintaremos de blanco, excepto la que tenga como ID="tabla1". Me da igual que sean tablas que DIVS, lo único que tendrías es que cambiar el código para que en vez de recoger tablas, recoga DIV. y eso sí, a la tabla/DIV principal le asignas el ID="tabla1" (o como lo quieras llamar). De esta manera la función javascript va a pintar todas las tablas/DIVS que encuentre de color blanco, y solo la que tenga el ID buscado la pintará de verde.

a ver si vale.... (por Dios que valga!) jajajaja

saludos.

[ceSharp]

por cierto, se me ha escapado una variable 'color' que ya no vale para nada. y me imagino que lo sabrás, pero estas lineas las tienes que meter en tu función, por si solas no van a hacer nada (Creo)

[roboty]

una cosa no entendi bien pero haber yo a la capa div si le pongo un identificador me pintara todas ya que yo no cambio el div ya que esta fijo esque no te entendi bien

[ceSharp]

si todos los DIVS se generan dinámicamente, puedes asignar un id a cada uno, pero que sean distintos. Yo de PHP cero, soy del lado oscuro (punto net ;), pero me imagino que en php también puedes asignar IDS dinámicamente, en plan:
contador=0; capa.id="tabla"+contador; contador ++ .... (o algo así)
Si consigues asignar dinámicamente un id a cada DIV en PHP, y al DIV principal asignarle el ID que el código Javascript 'caza' para ponerle el color de fondo distinto de los demás ya lo tienes...