Advertisement
Udoro

Filter HTML table JS

Aug 10th, 2022
136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.24 KB | None | 0 0
  1. //SORT TABLE DATA BY NAME
  2.  
  3. //Get searchform
  4. let searchForm = document.getElementById('search_form');
  5.  
  6. //Get input
  7. let searchInput = document.getElementById('search_input');
  8.  
  9. // Get radio buttons
  10. let highlightRadio = document.getElementById('radio_highlight');
  11. let filterRadio = document.getElementById('radio_filter');
  12.  
  13.  
  14.  
  15.  
  16. //add event listener
  17.  
  18. searchForm.addEventListener('click', checkRadio);
  19.  
  20.  
  21.  
  22. //----------------------------------
  23. //Check
  24.  
  25. function checkRadio(){
  26.  
  27.  
  28.  
  29. if(highlightRadio.checked){
  30. resetFilter()
  31.  
  32. searchInput.addEventListener('keyup', highlightData);
  33.  
  34. //set input placeholder
  35. searchInput.setAttribute('placeholder','Highlight Table Data...')
  36. }
  37.  
  38. else if (filterRadio.checked){
  39.  
  40. resetHighlight()
  41.  
  42. searchInput.addEventListener('keyup', filterNames);
  43.  
  44. //set input placeholder
  45. searchInput.setAttribute('placeholder','Filter Names...')
  46. }
  47.  
  48. }
  49.  
  50. //------------------------------------
  51.  
  52.  
  53. function filterNames(){
  54.  
  55.  
  56. if(highlightRadio.checked){
  57.  
  58. return;
  59. }
  60.  
  61.  
  62.  
  63. //Get value of input
  64.  
  65. let filterValue = searchInput.value.toUpperCase();
  66.  
  67.  
  68.  
  69. // Get table row
  70.  
  71. let trow = document.querySelectorAll('.tr');
  72.  
  73. // Get names
  74. trow.forEach(tr =>{
  75.  
  76. let tdName = tr.querySelector("[data-label='Name']")
  77.  
  78.  
  79.  
  80. // if matched
  81.  
  82. if(tdName.innerHTML.toUpperCase().indexOf(filterValue) > -1){
  83.  
  84. // set table data parent style
  85.  
  86. tdName.parentElement.style.display= '';
  87.  
  88.  
  89.  
  90. } else{
  91.  
  92. tdName.parentElement.style.cssText= "display: none !important";
  93. }
  94.  
  95.  
  96. })
  97.  
  98.  
  99. }
  100.  
  101. //------------------------------------
  102.  
  103.  
  104. function resetFilter(){
  105.  
  106.  
  107. //Get value of input
  108.  
  109. let filterValue = searchInput.value.toUpperCase();
  110.  
  111.  
  112. let trow = document.querySelectorAll('.tr');
  113.  
  114. // Get names
  115. trow.forEach(tr =>{
  116.  
  117. let tdName = tr.querySelector("[data-label='Name']")
  118.  
  119. tdName.parentElement.style.display= '';
  120.  
  121.  
  122. })
  123.  
  124.  
  125. }
  126.  
  127.  
  128.  
  129.  
  130. //------------------------------------
  131.  
  132. function highlightData(){
  133.  
  134. if (filterRadio.checked){
  135.  
  136. return;
  137. }
  138.  
  139.  
  140.  
  141. //Get value of input
  142.  
  143. let filterValue = searchInput.value.toUpperCase();
  144.  
  145. //console.log(filterValue)
  146.  
  147. // Get trow
  148.  
  149. let trow = document.querySelectorAll('.tr');
  150.  
  151. // Get names
  152. trow.forEach(tr =>{
  153.  
  154. let td = tr.querySelectorAll("[data-label]")
  155.  
  156. //console.log(td.parentElement)
  157.  
  158. // if matched
  159.  
  160. for (let i=0; i < td.length; i++) {
  161.  
  162.  
  163.  
  164. if(td[i].innerHTML.toUpperCase().indexOf(filterValue) > -1 && filterValue != ''){
  165.  
  166. td[i].style.backgroundColor= 'yellow';
  167.  
  168.  
  169.  
  170. } else{
  171.  
  172. td[i].style.backgroundColor= 'inherit';
  173. }
  174.  
  175.  
  176. }
  177.  
  178.  
  179.  
  180. })
  181.  
  182.  
  183. }
  184.  
  185.  
  186.  
  187. //------------------------------------
  188.  
  189. function resetHighlight(){
  190.  
  191.  
  192. let filterValue = searchInput.value.toUpperCase();
  193. let trow = document.querySelectorAll('.tr');
  194.  
  195.  
  196. trow.forEach(tr =>{
  197.  
  198. let td = tr.querySelectorAll("[data-label]")
  199.  
  200. for (let i=0; i < td.length; i++) {
  201.  
  202. td[i].style.backgroundColor= 'inherit';
  203.  
  204. }
  205.  
  206. })
  207.  
  208.  
  209. }
  210.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement