Filter dynamic table

//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']")


				var NameSpan = tdName.querySelector("span")


			// if matched

			if(NameSpan.innerHTML.toUpperCase().indexOf(filterValue) > -1){

				// set table data parent style

				NameSpan.parentElement.parentElement.style.display= '';



			} else{

                NameSpan.parentElement.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 tds = tr.querySelectorAll("[data-label]")

			//console.log(td.parentElement)

			// if matched

			tds.forEach(td => {

				var tdSpan = td.querySelector("span")



			if(tdSpan.innerHTML.toUpperCase().indexOf(filterValue) > -1 && filterValue != ''){

				tdSpan.parentElement.style.backgroundColor= 'yellow';



			} else{

						tdSpan.parentElement.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';

			}

    })


}