[Resolvido] tabela zebra 'dinamica'

[leooizepi 1]

e ae galera, o titulo ta meio estranho neh.. hehe mais vo explica..

 

tenho um relatorio, onde 1 registro pode ter N materiais, por ex: registo 1 tem 2 materiais, registro 2 tem 4 materiais. Ai eu tenho que pintar o fundo no formato zebra, mais o dificil que vai ser dinamica, como faço isso?

 

exemplo da tabela

<table class="table_estacao">
	<thead>
    	<tr>
        	<th>Titulo 1</th>
            <th>Titulo 2</th>            
        </tr>        
    </thead>
    <tbody>
    	<!-- fundo branco -->
        <tr class="new_line">
        	<td rowspan="2">Registro 1</td>
            <td>Material 1 do Registro 1</td>
        </tr>
        <tr>
            <td>Material 2 do Registro 1</td>
        </tr>
        <!-- fim fundo branco -->
        
        <!-- fundo azul -->
        <tr class="new_line">
        	<td rowspan="3">Registro 2</td>
            <td>Material 1 do Registro 2</td>
        </tr>
        <tr>
            <td>Material 2 do Registro 2</td>
        </tr>
        <tr>
            <td>Material 3 do Registro 2</td>
        </tr>
        <!-- fim fundo azul -->
        
        <!-- fundo branco -->
        <tr class="new_line">
        	<td rowspan="4">Registro 3</td>
            <td>Material 1 do Registro 3</td>
        </tr>
        <tr>
            <td>Material 2 do Registro 3</td>
        </tr>
        <tr>
            <td>Material 3 do Registro 3</td>
        </tr>
        <tr>
            <td>Material 4 do Registro 3</td>
        </tr>
        <!-- fim fundo branco -->
    </tbody>
</table>

meu script jquery

$('.table_estacao tbody tr.new_line:odd').addClass('impar');
$('.table_estacao tbody tr.new_line:even').addClass('par');

alguma duvida soh pergunta!!

 

valeu!!

[Eliseu M. 2]

• Puts... você vai ter que criar várias classes se quiser pintar as "matérias" com cor parecida ao do "registro". Ou você pode criar uma classe só para as matérias, por exemplo, todos os BGs das matérias teriam fundo verde clarinho, tendeu?
• Até que tem solução, mas seria com um JavaScript bem montado, no qual ele daria uma classe e uma cor randômica para os elementos filhos (matérias) dos registros.

Dei uma pesquisada e não achei nada relacionado. Acho que a melhor solução seria mesmo a segunda. Até mais!

[klonder 14]

Zebra dinâmica com 2 cores:

 

<style type="text/css">
.linha1 {background:#FFFFFF;}
.linha2 {background:#E1F0FF;}
</style>
<script type="text/javascript">
var material = new Array();

material[0] = new Array();
material[0][0] = "Material 1 do Registro 1";
material[0][1] = "Material 2 do Registro 1";
material[0][2] = "Material 3 do Registro 1";
material[0][3] = "Material 4 do Registro 1";

material[1] = new Array();
material[1][0] = "Material 1 do Registro 2";
material[1][1] = "Material 2 do Registro 2";
material[1][2] = "Material 3 do Registro 2";
material[1][3] = "Material 4 do Registro 2";
material[1][4] = "Material 5 do Registro 2";
material[1][5] = "Material 6 do Registro 2";

material[2] = new Array();
material[2][0] = "Material 1 do Registro 3";
material[2][1] = "Material 2 do Registro 3";
material[2][2] = "Material 3 do Registro 3";

function tamJanela() {
objDiv1 = document.getElementById("resultados1");
var bloco = "<table>";
	for (var iLoop = 0; iLoop<material.length; iLoop++) {
			for (var iLinhas = 0; iLinhas<material[iLoop].length; iLinhas++) {
			if (iLoop%2==0) {
				bloco += "<tr><td class='linha1'>"+material[iLoop][iLinhas]+"</td></tr>";
			} else {
				bloco += "<tr><td class='linha2'>"+material[iLoop][iLinhas]+"</td></tr>";
			}
		}
	}
bloco += "</table>";
	objDiv1.innerHTML = bloco;//alert(bloco);
}
</script>
<div id="resultados1" onclick="tamJanela()" style="cursor:pointer">Clique aqui para ver a lista de materiais!</div>

[Maujor 144]

$(document).ready(function(){
$('.table_estacao').addClass('impar')

$('.table_estacao .new_line:even').each(function() {
$(this).addClass('par')

var rowSpan = $(this).children('td:eq(0)').attr('rowspan') 

next = $(this).next()

for (var i=1; i<rowSpan; i++) {
next.addClass('par')
next = next.next()
}
})
})

[leooizepi 1]

$(document).ready(function(){
	$('.table_estacao').addClass('impar')
	
	$('.table_estacao .new_line:even').each(function() {
	$(this).addClass('par')

	var rowSpan = $(this).children('td:eq(0)').attr('rowspan') 
	
	next = $(this).next()
	
	for (var i=1; i<rowSpan; i++) {
	next.addClass('par')
	next = next.next()
	}
	})
})

 

e ae Maujor, é um grande prazer esta recebendo uma resposta sua! Tenho seu primeiro livro de jQuery ('jQuery A Biblioteca do progamador js'), agora falta o novo sobre Ajax! Parabens pelos livros!!

 

Voltando ao topico, peguei seu código e alterei apenas uma linha:

$('.table_estacao').addClass('impar')

coloquei:

 

$('.table_estacao tr').addClass('impar')

e usando seu codigo, fiz o evento 'hover' e 'click', para dar uma dinamica legal nos registros. Vou tentar melhorar para nao ficar repetindo as funcoes, segue o codigo:

// tabela zebra
$('.table_estacao tr').addClass('impar')                
$('.table_estacao .new_line:even').each(function() {        
	$(this).addClass('par')        
	var rowSpan = $(this).children('td:eq(0)').attr('rowspan')                 
	next = $(this).next()                
	for (var i=1; i<rowSpan; i++) {        
		next.addClass('par')        
		next = next.next()        
	}        
})

// eventos dos registros	
$('.table_estacao .new_line')
	.hover(
		function(){ 
			$(this).addClass('destacar')
			var rowSpan = $(this).children('td:eq(0)').attr('rowspan')                 
			next = $(this).next()                
			for (var i=1; i<rowSpan; i++) {        
				next.addClass('destacar')        
				next = next.next()        
			}        
		},
		function(){ 
			$(this).removeClass('destacar')
			var rowSpan = $(this).children('td:eq(0)').attr('rowspan')                 
			next = $(this).next()                
			for (var i=1; i<rowSpan; i++) {        
				next.removeClass('destacar')        
				next = next.next()        
			}
		}
	).click(
		function() {
		       // remover a classe fixar
                       $('.table_estacao tbody tr').removeClass('fixar');				
			
                        $(this).addClass('fixar')
			var rowSpan = $(this).children('td:eq(0)').attr('rowspan')                 
			next = $(this).next()                
			for (var i=1; i<rowSpan; i++) {        
				next.addClass('fixar')        
				next = next.next()        
			}
		}	
	)

valeu, MUITO OBRIGADO! abraço!!