hltable.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. function highlightTableRows(tableId, hoverClass, clickClass, multiple)
  2. {
  3. var table = document.getElementById(tableId);
  4. //если не был передан четвертый аргумент, то по умолчанию принимаем его как true
  5. if (typeof multiple == 'undefined') multiple = true;
  6. if (hoverClass)
  7. {
  8. //регулярное выражение для поиска среди значений атрибута class элемента, имени класса обеспечивающего подсветку по наведению мыши на строку.
  9. //Данное рег. выражение используется и в обработчике onclick
  10. var hoverClassReg = new RegExp("\\b"+hoverClass+"\\b");
  11. table.onmouseover = table.onmouseout = function(e)
  12. {
  13. if (!e) e = window.event;
  14. var elem = e.target || e.srcElement;
  15. while (!elem.tagName || !elem.tagName.match(/td|th|table/i)) elem = elem.parentNode;
  16. //Если событие связано с элементом TD или TH из раздела TBODY
  17. if (elem.parentNode.tagName == 'TR' && elem.parentNode.parentNode.tagName == 'TBODY')
  18. {
  19. var row = elem.parentNode;//ряд содержащий ячейку таблицы в которой произошло событие
  20. //Если текущий ряд не "кликнутый" ряд, то в разисимости от события либо применяем стиль, назначая класс, либо убираем.
  21. if (!row.getAttribute('clickedRow')) row.className = e.type=="mouseover"?row.className+" "+hoverClass:row.className.replace(hoverClassReg," ");
  22. }
  23. };
  24. }
  25. if (clickClass) table.onclick = function(e)
  26. {
  27. if (!e) e = window.event;
  28. var elem = e.target || e.srcElement;
  29. while (!elem.tagName || !elem.tagName.match(/td|th|table/i)) elem = elem.parentNode;
  30. //Если событие связано с элементом TD или TH из раздела TBODY
  31. if (elem.parentNode.tagName == 'TR' && elem.parentNode.parentNode.tagName == 'TBODY')
  32. {
  33. //регулярное выражение для поиска среди значений атрибута class элемента, имени класса обеспечивающего подсветку по клику на строке.
  34. var clickClassReg = new RegExp("\\b"+clickClass+"\\b");
  35. var row = elem.parentNode;//ряд содержащий ячейку таблицы в которой произошло событие
  36. //Если текущий ряд уже помечен стилем как "кликнутый"
  37. if (row.getAttribute('clickedRow'))
  38. {
  39. row.removeAttribute('clickedRow');//убираем флаг того что ряд "кликнут"
  40. row.className = row.className.replace(clickClassReg, "");//убираем стиль для выделения кликом
  41. row.className += " "+hoverClass;//назначаем класс для выделения строки по наведею мыши, т.к. курсор мыши в данный момент на строке, а выделение по клику уже снято
  42. }
  43. else //ряд не подсвечен
  44. {
  45. //если задана подсветка по наведению на строку, то убираем её
  46. if (hoverClass) row.className = row.className.replace(hoverClassReg, "");
  47. row.className += " "+clickClass;//применяем класс подсветки по клику
  48. row.setAttribute('clickedRow', true);//устанавливаем флаг того, что ряд кликнут и подсвечен
  49. //если разрешена подсветка только последней кликнутой строки
  50. if (!multiple)
  51. {
  52. var lastRowI = table.getAttribute("lastClickedRowI");
  53. //Если то текущей строки была кликнута другая строка, то снимаем с неё подсветку и флаг "кликнутости"
  54. if (lastRowI!==null && lastRowI!=='' && row.sectionRowIndex!=lastRowI)
  55. {
  56. var lastRow = table.tBodies[0].rows[lastRowI];
  57. lastRow.className = lastRow.className.replace(clickClassReg, "");//снимаем подсветку с предыдущей кликнутой строки
  58. lastRow.removeAttribute('clickedRow');//удаляем флаг "кликнутости" с предыдущей кликнутой строки
  59. }
  60. }
  61. //запоминаем индекс последнего кликнутого ряда
  62. table.setAttribute("lastClickedRowI", row.sectionRowIndex);
  63. }
  64. }
  65. };
  66. }