Após uma dúvida de um colega, resolvi escrever este post. Ele estava usando o antigo livequery que, atualmente, foi acoplado ao fonte do jquery (1.3X) renomeado para jQuery.live().
Utitlizar o jQuery.live() é uma possibilidade mas, numa análise mais cuidadosa e menos custosa, podemos usar o jQuery.clone(true). Passando true no parametro, dizemos que o elemento será clonado com todos os eventos para ser inserido em qualquer parte do DOM.
Vamos aos códigos:
HTML
<table cellspacing="1" cellpadding="2"> <thead> <tr> <th>col 1</th> <th>col 2</th> <th> </th> </tr> </thead> <tbody> <tr> <td>linha 1</td> <td>linha 1</td> <td><a href="#up">up</a> <a href="#down">down</a></td> </tr> <tr> <td>linha 2</td> <td>linha 2</td> <td><a href="#up">up</a> <a href="#down">down</a></td> </tr> <tr> <td>linha 3</td> <td>linha 3</td> <td><a href="#up">up</a> <a href="#down">down</a></td> </tr> <tr> <td>linha 4</td> <td>linha 4</td> <td><a href="#up">up</a> <a href="#down">down</a></td> </tr> </tbody> </table>
CSS
table {
font: 1.5em tahoma;
border:1px solid #dadada;
width:50%;margin:auto;
border:1px solid #dadada;
}
table thead tr {
text-align:left;
background:#fff;
}
table thead th {
background:#ccc;
}
table tbody tr {
cursor: pointer;
background:#eee;
}
JS
$(document).ready(function(){
$(document.getElementsByTagName('tbody')[0].childNodes).find('a').bind('click',function(){
var _hash = this.hash;
var $self = $(this);
var $tr = $self.parent().parent();
var $prev = $tr.prev();
var $next = $tr.next();
switch(_hash) {
case '#down':
if ($next.length > 0 && 'TR' === $next[0].tagName) {
$tr.clone(true).insertAfter($next[0]);
$tr.remove();
}
break;
default:
if ($prev.length > 0 && 'TR' === $prev[0].tagName) {
$tr.clone(true).insertBefore($prev[0]);
$tr.remove();
}
}
});
});
Resumindo. Identificamos os filhos da tag tbdoy (tr´s) e todas as tags de a inseridas neste contexto do seletor (tr a). O resto é auto-explicativo.
[s]
JunioR
