Seleccionar filas de una tabla HTML con javascript

[M3LiNdR1]

Hola, muy buenas!  


Despues de estar machacando mucho y resolver varios problemas, cuelgo el siguiente script por si alguien le interesa. Es útil para manejar la selección de las filas de una tabla con el ratón o con el teclado. Por cierto, se aceptan críticas y manera de mejorarlo

Aquí va el código:

Código (javascript) [Seleccionar] Expandir


/*Selecciona la fila y se cambia el estilo cuando le das click con el ratón*/
function myFunction(x)
{
if (document.getElementsByClassName("trselected").length > 0) {
var element = document.getElementsByClassName("trselected");
if (parseInt(element[0].id)%2 != 0) element[0].className = "impar";
else element[0].className = "";
}
x.className="trselected";
}

/*Ejecuta una acción diferente según la tecla del teclado que presiones.
el 40 es la flecha abajo, el 38 la flecha arriba y el 13 el enter. Mueve el estilo
de la fila, arriba o abajo, según el botón pulsado. Con el botón enter se muestra
la información de la fila seleccionada*/
function myFunction2(evnt)
{
var ev = (evnt) ? evnt : event;
  var code=(ev.which) ? ev.which : event.keyCode;
  if (code == 40) {
if (document.getElementsByClassName("trselected").length > 0) {
var element = document.getElementsByClassName("trselected");
var num = (parseInt(element[0].id) + 1).toString();
myFunction(document.getElementById(num));
}
else myFunction(document.getElementById(1))
  }
  else if (code == 38) {
if (document.getElementsByClassName("trselected").length > 0) {
var element = document.getElementsByClassName("trselected");
var num = (parseInt(element[0].id) - 1).toString();
myFunction(document.getElementById(num))
}
else myFunction(document.getElementById(document.getElementById("tbody").rows.length.toString()))
   }
   else if (code == 13 ) {
       if (document.getElementsByClassName("trselected").length > 0) {
   var element = document.getElementsByClassName("trselected");
   var info = element[0].cells[0].innerText;
   info += " "+element[0].cells[1].innerText;
   info += " "+element[0].cells[2].innerText;
   info += " "+element[0].cells[3].innerText;
   info += " "+element[0].cells[4].innerText;
   alert(info);
}

}
}
//Escucha y reacciona el evento cuando se pulsa una tecla
if (window.document.addEventListener) {
  window.document.addEventListener("keydown", myFunction2, false);
} else {
  window.document.attachEvent("onkeydown", myFunction2);
}

Codigo CSS y HTML de ejemplo:

Código (html4strict) [Seleccionar] Expandir


<table>
<thead>
<tr class="thead">
<th>Product</th>
<th></th>
<th>Price</th>
<th>Cost</th>
<th></th>
</tr>
</thead>
<tbody id ="tbody">
<!--Les ids han de començar per 1-->
<tr id = "1" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "2" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "3" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "4" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "5" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "6" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "7" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "8"  onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr><tr id = "9" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr><tr id = "10" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr><tr id = "11" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "12" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
<tr id = "13" class="impar" onclick="myFunction(this)" >
<td>ProductName01</td>
<td>1x</td>
<td>35.20€</td>
<td>35.20€</td>
<td>x</td>
</tr>
</tbody>
</table>



Espero que os sea útil!


Un saludo

[yarumal]

Hola y el archivo .css ?

[martindn94]

SALUDOS!!
gracias por el aporte en verdad me sirvió!!
*******************************************************************************************************************************para los que necesiten el archivo de estilos, simplemente pueden
declara lo siguiente:

<style>    .trselected{       background: gray;    } </style>

dentro del .html, y comprobarán que si sirve,
y nuevamente muchas gracias, llevaba horas con este tema xD