동적 생성 CSS 필터 테이블

19595 단어 CSSJavaScriptvanillajstech
Javscript Advent Calendar 2020 23일째 보도다.처음 뵙겠습니다.
개인 개발은 테이블을 걸러야 하는데 반은 놀다가 날아가는 방법을 생각해내서 공유하고 싶었다.절대 추천은 아니지만 재밌으니까 오락으로 보세요.
JSFiddle을 통해 원본과 미리보기를 확인할 수 있습니다

배경.


나는 백엔드 사람이기 때문에 가능한 한 서버에 접근한다.프런트엔드에서 외부 포장·웹팩 등을 절대 사용하지 않는 주의[1].
다만 가끔은 전단 처리가 원활할 수 있기 때문에 행수를 최소화하고 JS의'조금 보충'을 더한다.

HTML


HTML은 SSR을 사용합니다.나는 고html/template를 썼는데, 무엇이든지 다 된다.
음악 플레이어의 노래를 일람하는 인상을 주다.
<html>
  <head>
    <style id="filter-style"></style>
  </head>
  <form onsubmit="return false;">
    <label for="filter-input">filter:</label> 
    <input id="filter-input" type="text" placeholder="try 'love' or 'beatles'" oninput="return updateFilter(this),false;">
  </form>
  
  <table>
    <thead>
      <th>artist</th><th>album</th><th>title</th>
    </thead>
    <tbody>
      <tr data-artist="The Beatles" data-album="Yellow Submarine" data-title="All You Need is Love">
        <td>The Beatles</td><td>Yellow Submarine</td><td>All You Need Is Love</td>
      </tr>
      <tr data-artist="The Beatles" data-album="Yellow Submarine" data-title="Yellow Submarine">
        <td>The Beatles</td><td>Yellow Submarine</td><td>Yellow Submarine</td>
      </tr>
      <tr data-artist="Haddaway" data-album="The Album" data-title="What Is Love">
        <td>Haddaway</td><td>The Album</td><td>What Is Love</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</html>
점은 각 행에 데이터 속성을 추가합니다.이 속성을 사용하여 필터링합니다.<input>가 바뀌면 호칭updateFilter()이다.그리고onsubmit은 무효입니다.

JS


JS는 CSS를 동적으로 변경하는 역할을 합니다.
const style = document.getElementById("filter-style");

function updateFilter(elem) {
  let input = elem.value;
  if (input.length == 0) {
    // don't filter if empty
    style.innerHTML = "";
    return;
  }
  // escape quotes
  input = input.replace(/\x22/g, '\\\x22');
  input = input.replace(/\x27/g, '\\\x27');
  // generate CSS
  style.innerHTML = "table tbody tr[data-title*='" + input + "' i], table tbody tr[data-album*='" + input + "' i], table tbody tr[data-artist*='" + input + "' i] { display: revert; }\ntable tbody tr { display: none; }";
}
input이 비어 있으면 CSS가 비어 있습니다.그렇지 않으면 입력이 취소되어 CSS가 생성됩니다.
예를 들어 hoge를 입력하면 CSS가 이렇게 됩니다.
/* 当てはまる */
table tbody tr[data-title*='hoge' i], table tbody tr[data-album*='hoge' i], table tbody tr[data-artist*='hoge' i] {
	display: revert;
}

/* 当てはまらない */
table tbody tr {
	display: none;
}
CSS속성 선택기를 사용하여 일치하는 줄만 표시합니다.
예를 들어 쉼표로 여러 속성을 구분하고 용도에 따라 필요한 속성을 바꾸는 것이 좋다.
또한 [attr*=value] "이름이attra인 속성의 값은 문자열에 하나 이상의value를 포함하는 요소이다."기타여러 가지가 있어요..예를 들어 라벨의 구조<tr data-tags="hoge fuga poyo">와 [data-tags~='hoge']는hoge 라벨의 어떤 요소를 선택할 수 있다.
마지막으로 i 대소문자를 구분하지 않고 사용합니다.
이번에 바뀌었다display, 바뀌었다background-color로 강조해도 간단하다.
그나저나 document.styleSheets CSSOM을 괴롭혔지만 <style> 요소인 inner HTML의 커버 속도는 아직 시도해 본 적이 없다.

【부가】 JS에서 적합한 요소 획득

getComputedStyle에서 필터된 요소를 얻을 수 있습니다.
Array.from(document.querySelectorAll("tbody tr")).filter(e => getComputedStyle(e).display != "none");
하지만 여기까지는 JSON을 사용하는 게 좋을 것 같아요.

최후


"그럼 쓸 수 있어요?"이런 의문은 잘 모르겠지만 사용해 보니 결과가 빠르다.아니면 브라우저의 CSS 주위가 상당히 최적화되어 DOM을 하는 것보다 빠를지 모르겠다.
반드시 전문적인 압축 파일을 만들어 보세요.
우선 개인 개발에서 이를 사용해 이용자들에게'매우 빠르다'는 호평을 받았다.
업무 중에 사용하지 않습니까🙈
마지막으로 다시 한 번 말하지만 이것은 놀기만 하는 것이지 추천하는 것이 아니다😇
여러분도 반드시 인터넷 개발을 진행해야 합니다.즐거웠어요!
관심이 있다면 트위터에 이상한 코드들을 자주 중얼거려요. 한번 보세요~
각주
도대체 개인 개발 얘기야?일에 매우 열심이다😉 ↩︎
여러 div가 같은 줄에 같은 간격으로 분포되다
TextView의 일부 문자를 만들어 주위의 편의류를 클릭했다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage