On 09/03/2010 11:05 AM, Emi Lu wrote: > Good morning, > > Does anyone know the codes to highlight one row (change color) > onmouseover please? > Found the answer:
http://zgqhyh.javaeye.com/blog/191583 "highlightTableRows" is exactly what I need! I put this in a global .js file and then call it *after*</display:table> using: <script type="text/javascript">highlightTableRows("userList");</script> Where my table has an id: <display:table id="userList"> =============================================================================== 1. /** 2. * This JavaScript performs the task of highlighting a row in a displayTag table. 3. * The javascript is called by adding the following line in your JSP page after the 4. * declaration of your display tag 5. * <script type="text/javascript">highlightTableRows("searchResultTO");</script> 6. * An example is as follows: 7. * <html> 8. * <body> 9. * <displaytag:table name="${sessionScope.searchResultList}" id="searchResultTO"/> 10. * <script type="text/javascript">highlightTableRows("searchResultTO");</script> 11. * </body> 12. * </html> 13. */ 14. 15. 16. 17. /** 18. * This function after the displayTag table has been created adds a onclick event 19. * handler to each row in the table. The onclick event will first reset all rows to 20. * the default background color which is white and then assign the clicked row to the 21. * highlight color which is a light green. 22. */ 23. function highlightTableRows(tableId) { 24. var previousClass = ''; 25. var table = document.getElementById(tableId); 26. var tbody = table.getElementsByTagName("tbody")[0]; 27. var rows = tbody.getElementsByTagName("tr"); 28. // add event handlers so rows light up and are clickable 29. for (i=0; i < rows.length; i++) { 30. rows[i].onmouseover = function() { 31. this.style.cursor="hand"; 32. }; 33. 34. rows[i].onmouseout = function() { 35. this.style.cursor=''; 36. }; 37. 38. rows[i].onclick = function() { 39. //reset all styles to blank for all rows 40. resetStylesAroundRow(this); 41. this.style.backgroundColor = "#74BAB7"; 42. var cell = this.getElementsByTagName("td")[0]; 43. if (cell.getElementsByTagName("a").length > 0) { 44. var link = cell.getElementsByTagName("a")[0]; 45. if (link.onclick) { 46. call = link.getAttributeValue("onclick"); 47. // this will not work for links with onclick handlers that return false 48. eval(call); 49. } else { 50. location.href = link.getAttribute("href"); 51. } 52. this.style.cursor="wait"; 53. } 54. }; 55. } 56. } 57. 58. /** 59. * Resets the table rows back to the default color. 60. */ 61. function resetStylesAroundRow(row) { 62. var previousClass = ''; 63. var table = row.parentElement.parentElement; 64. var tbody = table.getElementsByTagName("tbody")[0]; 65. var rows = tbody.getElementsByTagName("tr"); 66. for (i=0; i < rows.length; i++) { 67. rows[i].style.backgroundColor = "white"; 68. } 69. } ------------------------------------------------------------------------------ This SF.net Dev2Dev email is sponsored by: Show off your parallel programming skills. Enter the Intel(R) Threading Challenge 2010. http://p.sf.net/sfu/intel-thread-sfd _______________________________________________ displaytag-user mailing list displaytag-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/displaytag-user
