필터 코드 스 니펫을 통합하여 약간의 성공을 거두었습니다. 내가 찾고있는 문제는 필터가 중첩 테이블로만 삽입 할 수있는 내 데이터 테이블에서 선택되지 않는 것입니다. 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>
- 답변 # 1
- 답변 # 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&w=197& h=110&c=7&rs=1&qlt=80&dpr=1.76&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&w=197&h=110& amp;c=7&rs=1&qlt=80&dpr=1.76&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&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&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&w=197&h=110&c=7&rs=1&qlt=80&dpr=1.76&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>'); }
전체 테이블을 보여주는 바이올린 예
- javascript : Angular에서 입력 클릭 이벤트를 기반으로 페이지 위로 이동
- javascript : 내 웹 개발 code를 처리하는 데 어려움이 있습니다.
- javascript : RGB 값으로 회색 음영 얻기
- javascript : html, css, js로 onclick 이벤트를 어떻게 할 수 있습니까?
- javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?
- javascript : 내 웹사이트의 모바일 버전 버거 버튼이 드롭다운되지 않음
- javascript : .click 토글 기능을 어떻게 재설정합니까?
- javascript : EventListener에서 JS 기본값을 깨는 함수 매개 변수
- JavaScript(DOM)를 사용하여 색상 변경
- javascript : 누구든지 배경색으로 캔버스 이미지를 저장하는 방법을 말해 줄 수 있습니까?
제목 검색과 함께 전체 테이블을 표시하는 데 문제가 있습니다. (저희가 보낸 동일한 JavaScript 및 CSS를 사용하고 있습니다.) 감사의 Seraphendipity, 추가 정보를 기다리겠습니다.
HTML