Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //SORT TABLE DATA BY NAME
- //Get searchform
- let searchForm = document.getElementById('search_form');
- //Get input
- let searchInput = document.getElementById('search_input');
- // Get radio buttons
- let highlightRadio = document.getElementById('radio_highlight');
- let filterRadio = document.getElementById('radio_filter');
- //add event listener
- searchForm.addEventListener('click', checkRadio);
- //----------------------------------
- //Check
- function checkRadio(){
- if(highlightRadio.checked){
- resetFilter()
- searchInput.addEventListener('keyup', highlightData);
- //set input placeholder
- searchInput.setAttribute('placeholder','Highlight Table Data...')
- }
- else if (filterRadio.checked){
- resetHighlight()
- searchInput.addEventListener('keyup', filterNames);
- //set input placeholder
- searchInput.setAttribute('placeholder','Filter Names...')
- }
- }
- //------------------------------------
- function filterNames(){
- if(highlightRadio.checked){
- return;
- }
- //Get value of input
- let filterValue = searchInput.value.toUpperCase();
- // Get table row
- let trow = document.querySelectorAll('.tr');
- // Get names
- trow.forEach(tr =>{
- let tdName = tr.querySelector("[data-label='Name']")
- // if matched
- if(tdName.innerHTML.toUpperCase().indexOf(filterValue) > -1){
- // set table data parent style
- tdName.parentElement.style.display= '';
- } else{
- tdName.parentElement.style.cssText= "display: none !important";
- }
- })
- }
- //------------------------------------
- function resetFilter(){
- //Get value of input
- let filterValue = searchInput.value.toUpperCase();
- let trow = document.querySelectorAll('.tr');
- // Get names
- trow.forEach(tr =>{
- let tdName = tr.querySelector("[data-label='Name']")
- tdName.parentElement.style.display= '';
- })
- }
- //------------------------------------
- function highlightData(){
- if (filterRadio.checked){
- return;
- }
- //Get value of input
- let filterValue = searchInput.value.toUpperCase();
- //console.log(filterValue)
- // Get trow
- let trow = document.querySelectorAll('.tr');
- // Get names
- trow.forEach(tr =>{
- let td = tr.querySelectorAll("[data-label]")
- //console.log(td.parentElement)
- // if matched
- for (let i=0; i < td.length; i++) {
- if(td[i].innerHTML.toUpperCase().indexOf(filterValue) > -1 && filterValue != ''){
- td[i].style.backgroundColor= 'yellow';
- } else{
- td[i].style.backgroundColor= 'inherit';
- }
- }
- })
- }
- //------------------------------------
- function resetHighlight(){
- let filterValue = searchInput.value.toUpperCase();
- let trow = document.querySelectorAll('.tr');
- trow.forEach(tr =>{
- let td = tr.querySelectorAll("[data-label]")
- for (let i=0; i < td.length; i++) {
- td[i].style.backgroundColor= 'inherit';
- }
- })
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement