elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Seleccionar filas de una tabla HTML con javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Seleccionar filas de una tabla HTML con javascript  (Leído 22,120 veces)
M3LiNdR1

Desconectado Desconectado

Mensajes: 131



Ver Perfil WWW
Seleccionar filas de una tabla HTML con javascript
« en: 27 Enero 2013, 02:50 am »

Hola, muy buenas!  :P


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 :D

Aquí va el código:

Código
  1. /*Selecciona la fila y se cambia el estilo cuando le das click con el ratón*/
  2. function myFunction(x)
  3. {
  4. if (document.getElementsByClassName("trselected").length > 0) {
  5. var element = document.getElementsByClassName("trselected");
  6. if (parseInt(element[0].id)%2 != 0) element[0].className = "impar";
  7. else element[0].className = "";
  8. }
  9. x.className="trselected";
  10. }
  11.  
  12. /*Ejecuta una acción diferente según la tecla del teclado que presiones.
  13. el 40 es la flecha abajo, el 38 la flecha arriba y el 13 el enter. Mueve el estilo
  14. de la fila, arriba o abajo, según el botón pulsado. Con el botón enter se muestra
  15. la información de la fila seleccionada*/
  16. function myFunction2(evnt)
  17. {
  18. var ev = (evnt) ? evnt : event;
  19.   var code=(ev.which) ? ev.which : event.keyCode;
  20.   if (code == 40) {
  21. if (document.getElementsByClassName("trselected").length > 0) {
  22. var element = document.getElementsByClassName("trselected");
  23. var num = (parseInt(element[0].id) + 1).toString();
  24. myFunction(document.getElementById(num));
  25. }
  26. else myFunction(document.getElementById(1))
  27.   }
  28.   else if (code == 38) {
  29. if (document.getElementsByClassName("trselected").length > 0) {
  30. var element = document.getElementsByClassName("trselected");
  31. var num = (parseInt(element[0].id) - 1).toString();
  32. myFunction(document.getElementById(num))
  33. }
  34. else myFunction(document.getElementById(document.getElementById("tbody").rows.length.toString()))
  35.    }
  36.    else if (code == 13 ) {
  37.        if (document.getElementsByClassName("trselected").length > 0) {
  38.    var element = document.getElementsByClassName("trselected");
  39.    var info = element[0].cells[0].innerText;
  40.    info += " "+element[0].cells[1].innerText;
  41.    info += " "+element[0].cells[2].innerText;
  42.    info += " "+element[0].cells[3].innerText;
  43.    info += " "+element[0].cells[4].innerText;
  44.    alert(info);
  45. }
  46.  
  47. }
  48. }
  49. //Escucha y reacciona el evento cuando se pulsa una tecla
  50. if (window.document.addEventListener) {
  51.   window.document.addEventListener("keydown", myFunction2, false);
  52. } else {
  53.   window.document.attachEvent("onkeydown", myFunction2);
  54. }

Codigo CSS y HTML de ejemplo:

Código
  1. <tr class="thead">
  2. <th>Product</th>
  3. <th></th>
  4. <th>Price</th>
  5. <th>Cost</th>
  6. <th></th>
  7. </tr>
  8. </thead>
  9. <tbody id ="tbody">
  10. <!--Les ids han de començar per 1-->
  11. <tr id = "1" class="impar" onclick="myFunction(this)" >
  12. <td>ProductName01</td>
  13. <td>1x</td>
  14. <td>35.20€</td>
  15. <td>35.20€</td>
  16. <td>x</td>
  17. </tr>
  18. <tr id = "2" onclick="myFunction(this)" >
  19. <td>ProductName01</td>
  20. <td>1x</td>
  21. <td>35.20€</td>
  22. <td>35.20€</td>
  23. <td>x</td>
  24. </tr>
  25. <tr id = "3" class="impar" onclick="myFunction(this)" >
  26. <td>ProductName01</td>
  27. <td>1x</td>
  28. <td>35.20€</td>
  29. <td>35.20€</td>
  30. <td>x</td>
  31. </tr>
  32. <tr id = "4" onclick="myFunction(this)" >
  33. <td>ProductName01</td>
  34. <td>1x</td>
  35. <td>35.20€</td>
  36. <td>35.20€</td>
  37. <td>x</td>
  38. </tr>
  39. <tr id = "5" class="impar" onclick="myFunction(this)" >
  40. <td>ProductName01</td>
  41. <td>1x</td>
  42. <td>35.20€</td>
  43. <td>35.20€</td>
  44. <td>x</td>
  45. </tr>
  46. <tr id = "6" onclick="myFunction(this)" >
  47. <td>ProductName01</td>
  48. <td>1x</td>
  49. <td>35.20€</td>
  50. <td>35.20€</td>
  51. <td>x</td>
  52. </tr>
  53. <tr id = "7" class="impar" onclick="myFunction(this)" >
  54. <td>ProductName01</td>
  55. <td>1x</td>
  56. <td>35.20€</td>
  57. <td>35.20€</td>
  58. <td>x</td>
  59. </tr>
  60. <tr id = "8"  onclick="myFunction(this)" >
  61. <td>ProductName01</td>
  62. <td>1x</td>
  63. <td>35.20€</td>
  64. <td>35.20€</td>
  65. <td>x</td>
  66. </tr><tr id = "9" class="impar" onclick="myFunction(this)" >
  67. <td>ProductName01</td>
  68. <td>1x</td>
  69. <td>35.20€</td>
  70. <td>35.20€</td>
  71. <td>x</td>
  72. </tr><tr id = "10" onclick="myFunction(this)" >
  73. <td>ProductName01</td>
  74. <td>1x</td>
  75. <td>35.20€</td>
  76. <td>35.20€</td>
  77. <td>x</td>
  78. </tr><tr id = "11" class="impar" onclick="myFunction(this)" >
  79. <td>ProductName01</td>
  80. <td>1x</td>
  81. <td>35.20€</td>
  82. <td>35.20€</td>
  83. <td>x</td>
  84. </tr>
  85. <tr id = "12" onclick="myFunction(this)" >
  86. <td>ProductName01</td>
  87. <td>1x</td>
  88. <td>35.20€</td>
  89. <td>35.20€</td>
  90. <td>x</td>
  91. </tr>
  92. <tr id = "13" class="impar" onclick="myFunction(this)" >
  93. <td>ProductName01</td>
  94. <td>1x</td>
  95. <td>35.20€</td>
  96. <td>35.20€</td>
  97. <td>x</td>
  98. </tr>
  99. </tbody>
  100.  


Espero que os sea útil!


Un saludo :D


« Última modificación: 27 Enero 2013, 02:53 am por M3LiNdR1 » En línea

Va baixar davant dels meus...ulls molt suaument...sense alterar la quietud de la nit,amb un somriure ple de confiança com sino se li escapes res...


C/C++ - Prolog - Java - PHP - Python - SQL - ASP.NET - C# - javascript
yarumal

Desconectado Desconectado

Mensajes: 1


Ver Perfil
Re: Seleccionar filas de una tabla HTML con javascript
« Respuesta #1 en: 13 Febrero 2014, 12:41 pm »

Hola y el archivo .css ?


En línea

martindn94

Desconectado Desconectado

Mensajes: 1


Ver Perfil
Re: Seleccionar filas de una tabla HTML con javascript
« Respuesta #2 en: 20 Diciembre 2014, 23:16 pm »

SALUDOS!! :D
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
« Última modificación: 20 Diciembre 2014, 23:22 pm por martindn94 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Filas de una tabla con y sin relación
Bases de Datos
sexto 3 3,260 Último mensaje 25 Mayo 2012, 14:43 pm
por HdM
Angularjs, Problemas al generar una tabla con filas editables
Desarrollo Web
vane777 2 3,583 Último mensaje 11 Abril 2014, 07:13 am
por EFEX
Mysql modificar solo un campo de todas las filas de una tabla
Bases de Datos
bgnumis 2 3,734 Último mensaje 3 Marzo 2015, 21:45 pm
por Shell Root
conteo de filas afectadas al truncar tabla
Bases de Datos
d91 1 2,893 Último mensaje 26 Noviembre 2015, 20:12 pm
por Carloswaldo
problemas al eliminar filas de una tabla en javascript
Desarrollo Web
evilsoft 3 7,232 Último mensaje 4 Junio 2017, 07:26 am
por LaThortilla (Effort)
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines