홈>2020-02-01 01:30

javascript - 중첩 테이블을 필터링하는 방법을 알고 싶습니까?

필터 코드 스 니펫을 통합하여 약간의 성공을 거두었습니다. 내가 찾고있는 문제는 필터가 중첩 테이블로만 삽입 할 수있는 내 데이터 테이블에서 선택되지 않는 것입니다. JavaScript/CSS에 대한 지식이 부족하여 이것이 수정 될 수 있는지 궁금합니다.

JAVASCRIPT

var input, table, rows, noMatches, markInstance;

window.onload = function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));

var input, table, rows, noMatches, markInstance;

window.onload = function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
}

function ContactsearchFX() {

  resetContent();

  markInstance.unmark({
    done: highlightMatches
  });

}

function resetContent() {
 noMatches.textContent = '';

  rows.forEach(function(row) {
    row.classList.remove('show');
  });
}

function highlightMatches() {
  markInstance.mark(input.value, {
    each: showParantRow,
    noMatch: onNoMatches,
  })
}

function showParantRow(element) {
  var row = element.closest('tr');
  row.classList.add('show');
}

function onNoMatches(text) {
  noMatches.textContent = 'No records match: "' + text + '"';
};

.input-wrap {
  margin-bottom: 12px;
}


#myInput:invalid~.hints {
  display: block;
}

#noMatches:empty, #noMatches:empty + .hints {
  display: none;
}

.style1 tr {
  display: none;
}

.style1 .show {
  display: table-row;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>

<div class="input-wrap">
  <label>
    Search Titles: 
    <input id="myInput" type="text" required
           placeholder="Search Titles" />
  </label>
</div>

<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "not working", "working" ...
  </p>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>
    <table><tr><td>not working</td></tr></table>  
    </td>
  </tr>
  <tr>
    <td>
    working
    </td>
  </tr>
</table>

javascripthtmlcss

답변 # 1

제목 검색과 함께 전체 테이블을 표시하는 데 문제가 있습니다. (저희가 보낸 동일한 JavaScript 및 CSS를 사용하고 있습니다.) 감사의 Seraphendipity, 추가 정보를 기다리겠습니다.

HTML

<div class="input-wrap">
  <label>
Search Titles: 
<input id="myInput" type="text" required
       placeholder="Search Titles" />
  </label>
</div>
<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "Title1", "Title2", "Title3"...
  </p>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>
        <br />
    <table style="width: 100%">
        <tr>
            <td>Title1</td>
        </tr>
        <tr>
            <td>
            <img data-src-                        hq="/th?id=ODL.53f33f407ba28930afd14f3d9390813c&amp;w=197&amp;        h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav"     alt="Iran seizes 'fuel-smuggling' tanker in Gulf" data-    priority="2" id="emb6E9DDF7A" class="rms_img"         src="https://www.bing.com        /th?id=ODL.53f33f407ba28930afd14f3d9390813c&amp;w=197&amp;h=110&    amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-        bm="50" width="197" height="110" />Description1</td>
        </tr>
        <tr>
            <td>Date1</td>
        </tr>
    </table>
    </td>
</tr>
</table>
    <br />

<table id="myTable0" style="width: 100%" class="style1">
  <tr>
    <td>
    <br />
    <table style="width: 100%">
        <tr>
            <td>Title2</td>
        </tr>
        <tr>
            <td>
            <img data-src-    hq="/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" alt="Flying ants: Swarms appear on weather map as 'rain'" data-priority="2" id="emb13B6D9078" class="rms_img" src="https://www.bing.com/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-bm="51" width="197" height="110" />Description2</td>
        </tr>
        <tr>
            <td>Date2</td>
        </tr>
    </table>
    </td>
</tr>
</table>
    <br />

<table id="myTable1" style="width: 100%" class="style1">
  <tr>
            <td>&nbsp;</td>
        </tr>
  <tr>
    <td>
    <br />
    <table style="width: 100%">
        <tr>
            <td>Title3</td>
        </tr>
        <tr>
            <td>
            <img data-src-        hq="/th?id=ODL.c9ffada4f6eedff438c5c3c2c26b73f4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" alt="MPs back bid to block Parliament suspension" data-priority="2" id="emb27B566CEC" class="rms_img" src="https://www.bing.com/th?id=ODL.c9ffada4f6eedff438c5c3c2c26b73f4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-bm="52" width="197" height="110" />Description3</td>
        </tr>       <tr>
            <td>Date3</td>
        </tr>
    </table>
    <br />
    </td>
</tr>
</table>

답변 # 2

Heyo,이게 당신의 멋진 모습에 맞습니까? 아니면 다른 것을 시도하고 있습니까?

show 를 추가하는 데 집중했습니다. 모든 부모 <tr> 에 클래스 일치하는 항목의 요소를 제거하고 재설정시 클래스를 제거하십시오. 또한 요소 주위에 $() 태그를 사용하면 객체 모델을 올바르게 얻을 수 있습니다. HTML 요소에서 Jquery 조작을 올바르게 시도한 것 같습니다.

CSS와 HTML은 대부분 손대지 않았습니다. 또한 noMatches와 .hint가 어떤 피드백 요소인지 알고 싶습니다.

HTML :

<!DOCTYPE html> <head>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>
</head>
<body>
<div class="input-wrap">
  <label>
    Search Titles: 
    <input id="myInput" type="text" required
           placeholder="Search Titles" />
  </label>
</div>

<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "not working", "working" ...
  </p>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>
    <table><tr><td>not working</td></tr></table>  
    </td>
  </tr>
  <tr>
    <td>
    working
    </td>
  </tr>
</table>
</body>

CSS :

.input-wrap {
  margin-bottom: 12px;
}


#myInput:invalid~.hints {
  display: block;
}

#noMatches:empty, #noMatches:empty + .hints {
  display: none;
}

.style1 tr {
  display: none;
}

.style1 .show {
  display: table-row;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

JS :

var input, table, rows, noMatches, markInstance;

$(document).ready(function init() {

  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});

function ContactsearchFX() {
  resetContent();
  markInstance.unmark({ done: highlightMatches });
}

function resetContent() {
    $('.noMatchErrorText').remove(); 
    //Remove this line to have a log of searches
    //noMatches.textContent = '';
  rows.forEach(function(row) {
    $(row).removeClass('show'); 
  });
}

function highlightMatches() {
  markInstance.mark(input.value, {
    each: showRow,
    noMatch: onNoMatches,
  })
}

function showRow(element) {
//alert(element);
  $(element).parents('tr').addClass('show');
        //Parents incase of several nestings
}

function onNoMatches(text) {
  $('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>'); 
}

<시간>

추가 중첩 ...

전체 하위 테이블을 표시하는 기능을 추가하는 것에 대한 의견을 제시하려면 JS에 다음 줄을 추가하십시오. $(element).parents('tr').siblings('tr').addClass('show'); . 이것은 부모 테이블 행뿐만 아니라 <tr> 인 부모의 형제들에게도 올바르게 표시되도록 지시합니다. 태그는 테이블이 최소한 반 정상인 한 일치하는 항목의 테이블을 표시합니다. "제목"을 입력하십시오. 두 테이블이 모두 표시됩니다. 그런 다음 "Title2"를 시도하면 <tr> 와 같이 관련 테이블 만 표시됩니다. 첫 번째 테이블의 태그는 형제가 아닌 사촌입니다.

또한 HTML을 약간 수정했습니다. 제대로 작동하려면 id="myTable" 가있는 부모 테이블이 필요합니다. 모든 테이블이 아래에 있거나 myTable 를 설정할 수 있습니다. 클래스로, 아마도 table 의 사실을 설명하기 위해 코드가 약간 변경되었습니다. 배열입니다.

새로운 HTML (새로운 내용) :

<!DOCTYPE html> <head>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>
</head>
<body>
<div class="input-wrap">
  <label>
Search Titles: 
<input id="myInput" type="text" required
       placeholder="Search Titles" />
  </label>
</div>
<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "Title1", "Title2", "Title3"...
  </p>
</div>

<table id="myTable" style="width: 100%" class="style1">
<tr><td><table id="myTabledawa" style="width: 100%" class="style1">
  <tr>
    <td>
        <br />
    <table style="width: 100%">
        <tr>
            <td>Title1</td>
        </tr>
        <tr>
            <td>
            <img data-src-                        hq="/th?id=ODL.53f33f407ba28930afd14f3d9390813c&amp;w=197&amp;        h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav"     alt="Iran seizes 'fuel-smuggling' tanker in Gulf" data-    priority="2" id="emb6E9DDF7A" class="rms_img"         src="https://www.bing.com        /th?id=ODL.53f33f407ba28930afd14f3d9390813c&amp;w=197&amp;h=110&    amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-        bm="50" width="197" height="110" />Description1</td>
        </tr>
        <tr>
            <td>Date1</td>
        </tr>
    </table>
    </td>
    </tr></table></td></tr>

<tr><td>
<table id="myTable0" style="width: 100%" class="style1">
  <tr>
    <td>
    <br />
    <table style="width: 100%">
        <tr>
            <td>Title2</td>
        </tr>
        <tr>
            <td>
            <img data-src-    hq="/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" alt="Flying ants: Swarms appear on weather map as 'rain'" data-priority="2" id="emb13B6D9078" class="rms_img" src="https://www.bing.com/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-bm="51" width="197" height="110" />Description2</td>
        </tr>
        <tr>
            <td>Date2</td>
        </tr>
    </table>
    </td>
</tr>
</table></td></tr>
</table>
</body>

CSS는 정확히 동일하게 유지되었습니다.

새로운 JS (작은 편집) :

var input, table, rows, noMatches, markInstance;
$(document).ready(function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});

function ContactsearchFX() {
  resetContent();
  markInstance.unmark({ done: highlightMatches });
}

function resetContent() {
    $('.noMatchErrorText').remove(); 
    //Remove this line to have a log of searches
    //noMatches.textContent = '';
  rows.forEach(function(row) {
    $(row).removeClass('show'); 
  });
}

function highlightMatches() {
  markInstance.mark(input.value, {
    each: showRow,
    noMatch: onNoMatches,
  })
}

function showRow(element) {
//alert(element);
  $(element).parents('tr').addClass('show');  $(element).parents('tr').siblings('tr').addClass('show');
        //Parents incase of several nestings
}

function onNoMatches(text) {
  $('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>'); 
}

전체 테이블을 보여주는 바이올린 예

Python2.net

javascript - 중첩 테이블을 필터링하는 방법을 알고 싶습니까?

관련 자료