Hola lodoman, primeramente te recomendaria usar algun framework javascript para estas tareas ya que se simplifica bastante el código. Bueno acá te dejo el código final que funciona, excepto por un detalle, a ver si lo encuentras, yo no tengo tiempo ahora de solucionarlo, pero supongo que vos puedes hallarle alguna solución.
Código HTML:
<html>
<head>
<script type="text/javascript">
addEvent(window,'load',iniciarEventos,false);
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function iniciarEventos(){
var td=document.getElementById('tabla1').getElementsByTagName("tr");
for(var i=0; i<td.length; i++)
{
addEvent(td[i], 'click', seleccion, false);
}
}
function seleccion(){
if(this.className=='selected')
this.className='';
else
this.className='selected';
}
function agregar(){
var tr=document.getElementById("tabla1").getElementsByTagName("tr");
var tbl2=document.getElementById("tabla2");//.getElementsByTagName("tbody")[0];
for(var i=0; i<tr.length; i++){
if(tr[i].className=="selected")
{
tr[i].className="";
tbl2.appendChild(tr[i]);
}
}
}
function regresar(){
var tr=document.getElementById("tabla2").getElementsByTagName("tr");
var tbl2=document.getElementById("tabla1");//.getElementsByTagName("tbody")[0];
for(var i=0; i<tr.length; i++){
if(tr[i].className=="selected")
{
tr[i].className="";
tbl2.appendChild(tr[i]);
}
}
}
</script>
<style>
#tabla1 tr:hover{
background:#9C0
}
#tabla1 tr.selected, #tabla1 tr.selected:hover{
background:#F00
}
#tabla2 tr:hover{
background:#9C0
}
#tabla2 tr.selected, #tabla2 tr.selected:hover{
background:#F00
}
</style>
<title>Documento sin título</title>
</head>
<body>
<table id="contenedor">
<tr>
<td>
<table id="tabla1">
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
</table>
</td>
<td>
<input type="button" id="agregar" onclick="agregar()">agregar fila</input>
<input type="button" id="regresar" onclick="regresar()">regresar fila</input>
</td>
<td>
<table id="tabla2">
</table>
</td>
</tr>
</table>
</body>
</html> Saludos!