Ir para conteúdo

POWERED BY:

Arquivado

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

Wellington09

pintar linha

Por , em Javascript

Recommended Posts

Wellington09    1

Wellington09
Postado

Tenho uma grid onde o usuario clica em uma checkbox de id all onde ele marca e desmarca as demais checkbox, só que eu gostaria de saber como eu faço para que as checkbox que forem selecionadas deixem a linha

<tr>
de cor vermelha ?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
  $j('#all').click(function(){
    var checked_status = this.checked;
    $j('input[type="checkbox"]').each(function(){ this.checked = checked_status; });
  });
</script>


<table>
  <tr class="title">
    <th><input id="all" name="all" type="checkbox" value="checkbox" /></th>
    <th>id</th>
    <th>new</th>
    <th class="action"></th>
  </tr>
  <tr>
    <td><input name="select" type="checkbox" value="1" /></td>
    <td>1</td>
    <td>my new</td>
    <td><a href="#">edit</a> <a href="#">delete</a></td>
  </tr>
</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

usando a referencia $( this ) e o método .parent()

 

você conseguirá achar o <tr>

depois é só usar o .css() para colorir.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wellington09    1

Wellington09
Postado

Ai amigo, com sua dica consegui fazer aqui, da uma olhada ai e ve se estou fazendo alguma coisa errada(que não esteja no padrão).

<html>
    <head>
        <meta content="charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script>
			var $j = jQuery.noConflict()
			$j(document).ready(function($j){
			  $j('input[type="checkbox"]').click(function(){
				this.checked == true ? $j(this).parents('tr').css({'background': '#FFCCCC', 'border-bottom': '1px solid #999'}) : $j(this).parents('tr').removeAttr('style')
			  });
			  $j('#all').click(function(){
				var checked_status = this.checked;
				$j('input[type="checkbox"]').each(function(){ 
				this.checked = checked_status;
				this.checked == true ? $j(this).parents('tr').css({'background': '#FFCCCC', 'border-bottom': '1px solid #999'}) : $j(this).parents('tr').removeAttr('style')
				  });
			  });
			});
        </script>
    </head>

    <body>
        <table>
          <tr class="title">
            <th><input id="all" name="all" type="checkbox" value="checkbox" /></th>
            <th>id</th>
            <th>new</th>
            <th class="action"></th>
          </tr>
          <tr>
            <td><input name="select" type="checkbox" value="1" /></td>
            <td>1</td>
            <td>my new</td>
            <td><a href="#">edit</a> <a href="#">delete</a></td>
          </tr>
          <tr>
            <td><input name="select" type="checkbox" value="2" /></td>
            <td>2</td>
            <td>my new</td>
            <td><a href="#">edit</a> <a href="#">delete</a></td>
          </tr>
          <tr>
            <td><input name="select" type="checkbox" value="3" /></td>
            <td>3</td>
            <td>my new</td>
            <td><a href="#">edit</a> <a href="#">delete</a></td>
          </tr>
        </table>
    </body>
</html>
O unico problema é que a checkbox de id all tb fica com o background:#FFCCCC; e eu não queria que isso acontecese e um outro caso que eu já não sei se é um problema é que quando a pagina é atualizada as tags tr que estavam com background:#FFCCCC; perdem as cores.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wellington09    1

Wellington09
Postado

consegui fazer com que ele não coloque background no tr.title faltou acrescentar um parent() e já aproveitei e adicionei uma classe aos tr

ficou assim:

this.checked == true ? $j(this).parent('td').parents('tr').addClass('checado') : $j(this).parent('td').parents('tr').removeAttr('class')

agora a parte de atualizar a pagina e sumir as cores das linhas que foram clicadas eu já não sei como fazer e nem sei se tem como fazer isso

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