Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: M3LiNdR1 en 27 Enero 2013, 02:50 am


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


Espero que os sea útil!


Un saludo :D

Título: Re: Seleccionar filas de una tabla HTML con javascript
Publicado por: yarumal en 13 Febrero 2014, 12:41 pm
Hola y el archivo .css ?

Título: Re: Seleccionar filas de una tabla HTML con javascript
Publicado por: martindn94 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


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines