JS-128-table td 내용 동적 검색해 해당하는 tr만 보여주기

같은 내용을 JS로 한 번 만들어봤다.

 

 

function search() {

	const ipt = document.querySelector("#searchMem");
	let trs = document.querySelectorAll("table tbody tr");

	ipt.addEventListener("keyup", function() {
		let text = ipt.value;
		for (let tr of trs) {
			tr.style.display = "none";
		}

		let show = document.querySelectorAll("table tbody tr td");
		for (let j = 0; j < show.length; j++) {
			if (show[j].textContent.includes(text)) {
				show[j].parentElement.style.display = "";
			}
		}
	});

} search();

확실히 길다.... 
for문이 두 번이나 들어가는데, 이것보다 더 축약할 수 있는 방법이 있을랑가..?
고민을 한 번 해보자고

일단 원리는 JQ에서 했던 방식이랑 하등 다를 바가 없다.
input에 담긴 value를 keyup으로 받되, keyup 되는 순간 모든 tr을 우선 숨긴다.
그리고 value값이 포함되어 있는 td만 찝어서 그 부모 태그인 tr을 보여주는 것!

 

제이쿼리가 확실히 짧긴 하다만, 그렇다고 JS가 못해먹을 수준으로 긴 것 같지는 않다!