Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ZecaLoteiro

Aprendendo jQuery - tr:last

Por , em Javascript

Recommended Posts

ZecaLoteiro    0

ZecaLoteiro
Postado

Bom dia, estou aprendendo jQuery e estou com um problema que não consigo resolver...

 

Tenho alguns tables com conteúdo dinâmico, e preciso deixar todos eles com a mesma quantidades de linha, mesmo se dinamicamente for adicionada apenas uma linha.

 

Para isso, estou usando a seguinte lógica:

 

Verifica quantas <tr> o table tem, se tiver menos que 12 (10 de dados + 2 de cabeçalho e roda pé) localiza a ultima linha, e antes dela adiciona quantos <tr> forem necessários para que ele possua as 10 linhas de dados.

 

O problema e que a ultima linha (roda pé) possui um outro table dentro, dessa forma, quando eu conto os <tr> do table principal, ele sempre conta a mais (devido a esse table de dentro da ultima linha)..

 

Alguém pode me ajudar com essa questão?

 

Segue o código:

 

 

<!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>
	Dashboard
</title>
    <style type="text/css">
        body
        {
            font-family: Verdana;
            font-size: small;
        }
        h3
        {
            margin-top: 26px;
            margin-bottom: 4px;
        }
        #geral
        {
            width: 1210px;
            margin: 0 auto;
        }
        #dash1
        {
            float: left;
            padding: 0 10px 0 10px;
            height: 296px;
            display: table;
            position: relative;
            padding-bottom: 10px;
        }
        #dash2
        {
            display: table;
            padding: 0 10px 0 10px;
            height: 296px;
            float: left;
        }
        #dash3
        {
            display: table;
            padding: 0 10px 0 10px;
            height: 296px;
        }
        #dash4
        {
        	clear: both;
        	display: table;
        	padding: 0 10px 0 10px;
        }
        #logo
        {
            text-align: center;
            opacity: 0.4;
            height: 70px;
        }
        #atualizacao
        {
            color: gray;
            text-align: center;
        }
        .dado
        {
            padding-left: 60px;
        }
    </style>
	<script src="jquery-1.9.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function()
		{
			$('.grid').each(function()
			{
				alert($('tbody > tr', this).length);
				var diferenca = 13 - $('tr', this).length;
				if (diferenca > 0)
				{
					for(k=0;k<diferenca; k++)
					{
						$('tr:last-child:eq(0)', this).before('<tr><td> </td></tr>');
					}
				}
			});
		});
		
	</script>
</head>
<body>
    <form name="form1" method="post" action="Dashboard.aspx" id="form1">
<div>
</div>
    <div id="geral">
		<div id="dash1">
			<h3>Não conformidade Externa</h3>
		<table cellspacing="0" cellpadding="2" border="0" id="GridViewNCE" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;width:450px;border-collapse:collapse;" class="grid">
			<tr style="background-color:Tan;font-weight:bold;">
				<th scope="col">Tipo</th><th scope="col">Código</th><th scope="col">Marca</th><th scope="col">Vendas</th><th scope="col">Fábrica</th>
			</tr>
			<tr>
				<td>Q</td><td>
                <a id="GridViewNCE_ctl02_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1543" target="_blank">1543</a>
                </td><td>TESTE</td><td style="color:Black;">0</td><td style="color:Red;font-weight:bold;">25</td>
			</tr><tr style="background-color:White;">
				<td>Q</td><td>
				<a id="GridViewNCE_ctl03_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1544" target="_blank">1544</a>
                                </td><td>TESTE                 </td><td style="color:Black;">0</td><td style="color:Red;font-weight:bold;">22</td>
			</tr><tr>
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl04_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1545" target="_blank">1545</a>
                                </td><td>TESTE                 </td><td style="color:Black;">0</td><td style="color:Red;font-weight:bold;">22</td>
			</tr><tr style="background-color:White;">
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl05_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1540" target="_blank">1540</a>
                                </td><td>TESTE              </td><td style="color:Orange;">9</td><td style="color:Red;">18</td>
			</tr><tr>
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl06_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1548" target="_blank">1548</a>
                                </td><td>TESTE           </td><td style="color:Black;">0</td><td style="color:Red;">15</td>
			</tr><tr style="background-color:White;">
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl07_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1549" target="_blank">1549</a>
                                </td><td>TESTE             </td><td style="color:Black;">0</td><td style="color:Red;">15</td>
			</tr><tr>
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl08_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1550" target="_blank">1550</a>
                                </td><td>TESTE             </td><td style="color:Black;">0</td><td style="color:Red;">15</td>
			</tr><tr style="background-color:White;">
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl09_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1556" target="_blank">1556</a>
                                </td><td>TESTE            </td><td style="color:Black;">0</td><td style="color:Red;">14</td>
			</tr><tr>
				<td>Q</td><td>
                                    <a id="GridViewNCE_ctl10_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=Q&numero=1557" target="_blank">1557</a>
                                </td><td>TESTE             </td><td style="color:Black;">0</td><td style="color:Orange;">13</td>
			</tr><tr style="background-color:White;">
				<td>E</td><td>
                                    <a id="GridViewNCE_ctl11_HyperLinkNumero" href="ReportViewer.aspx?idReport=183&tipo=E&numero=383" target="_blank">383</a>
                                </td><td>TESTE TESTE         </td><td style="color:Black;">1</td><td style="color:Orange;">12</td>
			</tr><tr align="center" style="color:DarkSlateBlue;background-color:PaleGoldenrod;">
				<td colspan="5"><table border="0">
					<tr>
						<td><span>1</span></td><td><a href="javascript:__doPostBack('GridViewNCE','Page$2')" style="color:DarkSlateBlue;">2</a></td>
					</tr>
				</table></td>
			</tr>
		</table>
	</div>
                    
                </div>
                <div id="dash2">
                    <h3>
                        Não conformidade Interna</h3>
                    <div>
		<table cellspacing="0" cellpadding="2" border="0" id="GridViewNCI" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;width:350px;border-collapse:collapse;" class="grid">
			<tr style="background-color:Tan;font-weight:bold;">
				<th scope="col">Código</th><th scope="col">Setor</th><th scope="col">Resposta do setor</th>
			</tr><tr>
				<td>170</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">200</td>
			</tr><tr style="background-color:White;">
				<td>171</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">200</td>
			</tr><tr>
				<td>172</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">200</td>
			</tr><tr style="background-color:White;">
				<td>181</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">195</td>
			</tr><tr>
				<td>15</td><td>Teste                   </td><td style="color:Red;font-weight:bold;">190</td>
			</tr><tr style="background-color:White;">
				<td>182</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">190</td>
			</tr><tr>
				<td>183</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">190</td>
			</tr><tr style="background-color:White;">
				<td>184</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">190</td>
			</tr><tr>
				<td>185</td><td>Acabamento               </td><td style="color:Red;font-weight:bold;">190</td>
			</tr><tr style="background-color:White;">
			<td>492</td><td>Teste Fios           </td><td style="color:Red;font-weight:bold;">147</td>
			</tr>
				<tr align="center" style="color:DarkSlateBlue;background-color:PaleGoldenrod;">
				<td colspan="3"><table border="0">
					<tr>
						<td><span>1</span></td><td><a href="javascript:__doPostBack('GridViewNCI','Page$2')" style="color:DarkSlateBlue;">2</a></td><td><a href="javascript:__doPostBack('GridViewNCI','Page$3')" style="color:DarkSlateBlue;">3</a></td><td><a href="javascript:__doPostBack('GridViewNCI','Page$4')" style="color:DarkSlateBlue;">4</a></td>
					</tr>
				</table></td>
			</tr>
		</table>
	</div>
                </div>
                <div id="dash3">
                    <h3>
                        Contra tipo</h3>
                    <div>
		<table cellspacing="0" cellpadding="2" border="0" id="GridViewCTP" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;width:350px;border-collapse:collapse;" class="grid">
			<tr style="background-color:Tan;font-weight:bold;">
				<th scope="col">Código</th><th scope="col">Marca</th><th scope="col">Dias em aberto</th>
			</tr><tr>
				<td>1179</td><td>Teste              </td><td>957</td>
			</tr><tr style="background-color:White;">
				<td>3606</td><td>Teste                </td><td>344</td>
			</tr><tr>
				<td>3627</td><td>Teste                </td><td>344</td>
			</tr><tr style="background-color:White;">
				<td>3802</td><td>Teste                </td><td>314</td>
			</tr><tr>
				<td>4404</td><td>Teste                </td><td>161</td>
			</tr><tr align="center" style="color:DarkSlateBlue;background-color:PaleGoldenrod;">
				<td colspan="3"><table border="0">
					<tr>
						<td><span>1</span></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$2')" style="color:DarkSlateBlue;">2</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$3')" style="color:DarkSlateBlue;">3</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$4')" style="color:DarkSlateBlue;">4</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$5')" style="color:DarkSlateBlue;">5</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$6')" style="color:DarkSlateBlue;">6</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$7')" style="color:DarkSlateBlue;">7</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$8')" style="color:DarkSlateBlue;">8</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$9')" style="color:DarkSlateBlue;">9</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$10')" style="color:DarkSlateBlue;">10</a></td><td><a href="javascript:__doPostBack('GridViewCTP','Page$11')" style="color:DarkSlateBlue;">...</a></td>
					</tr>
				</table></td>
			</tr>
		</table>
	</div>
                    
                </div>
               
            
</div>
    
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZecaLoteiro    0

ZecaLoteiro
Postado

Pra controlar quantas linhas ele vai adicionar....

 

Se já tem 7 linhas, adiciona só mais 3...

 

Realmente não sei se é a melhor maneira com jQuery uhhu...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Rangel    208

Vinicius Rangel
Postado

entendi.

 

acontece que você já chamando toda e qualquer TR

você precisa ter uma classe indicando quais tr de quais tabelas vai receber esse script.

 

cria uma classe padrão e trabalhe assim

 

 

 

$('.nomeDaClassPadrao tr:last-child:eq(0)', this).before('<tr><td> </td></tr>');

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZecaLoteiro    0

ZecaLoteiro
Postado

 

entendi.

 

acontece que você já chamando toda e qualquer TR

você precisa ter uma classe indicando quais tr de quais tabelas vai receber esse script.

 

cria uma classe padrão e trabalhe assim

 

 

 

$('.nomeDaClassPadrao tr:last-child:eq(0)', this).before('<tr><td> </td></tr>');

 

Então, eu até tenho essa classe padrão, .grid , mas se eu fizer isso, vou adicionar em todas as grids, e não só na que precisa adicionar as linhas....

 

O que eu preciso fazer é associar o "this" com " > tr:last-child" :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZecaLoteiro    0

ZecaLoteiro
Postado

Hum....

 

Valeu pela força...

 

Acredito que quando tenho uma classe para cada elemento, ele perde o conceito de classe e passa ser um identificador, e foi o que eu fiz... :yes:

 

 

$(document).ready(function() {
            $('.grid').each(function() {
                var alvo = '#' + this.id;
                if ($(alvo + ' > tbody > tr').length < 12) {
                    var diferenca = 12 - $(alvo + ' > tbody > tr').length;
                    for (k = 1; k <= diferenca; k++) {
			var colunas = $(alvo + ' > tbody > tr:eq(2) > td').length
                        $(alvo + ' > tbody > tr:last-child').before('<tr><td colspan="' + colunas + '"> </td></tr>');
                    }
                }
            });
        });

 

Valeu pela força... :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Rangel    208

Vinicius Rangel
Postado

a sua ideia é boa e funcional.

mas eu não queria uma classe para CADA, queria uma classe que fosse rodar com esse seu "plugin".

 

assim você teria o controle da suas tabelas e dizer ESSA eu quero ESSA OUTRA não colocando ou não essa classe especial.

 

essa classe grid tem outras funcionalidades pelo que percebo e é ai que esta pecando.

você precisaria ter uma unica e especifica para essa situação.

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZecaLoteiro    0

ZecaLoteiro
Postado

a sua ideia é boa e funcional.

mas eu não queria uma classe para CADA, queria uma classe que fosse rodar com esse seu "plugin".

 

assim você teria o controle da suas tabelas e dizer ESSA eu quero ESSA OUTRA não colocando ou não essa classe especial.

 

essa classe grid tem outras funcionalidades pelo que percebo e é ai que esta pecando.

você precisaria ter uma unica e especifica para essa situação.

abraços

 

Na vdd não, a classe .grid foi criada apenas para localizar quais tables deveriam ser corrigidas em caso de ter menos do que 10 linhas.... não possui mais nenhuma funcionalidade.... porém, se eu detectar que apenas uma delas precisa inserir 3 linhas, e utilizar a classe .grid para adicionar, adicionarei nas 3....

 

Não sei se entendi direito o que quis dizer....

 

 

** Lembrando que as tables são dinamicas, e eu não sei se elas terão ou não menos de 10 linhas em alguma página....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Rangel    208

Vinicius Rangel
Postado

na verdade não pois você faz a verificação.

ele só vai fazer se a diferença for maior que 0.

 

já que a classe grid tem apenas esse objetivo acho que usar o objeto this ou .grid direto na chamada do elemento daria na mesma.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito