HTML 테이블에서 실시간 검색 및 필터링을 수행하는 방법
한동안 구글에서 스택 오버플로를 검색했는데 이 문제를 해결할 수가 없습니다.
나는 과일을 포함한 표준 HTML 테이블을 가지고 있습니다.이와 같습니다.
<table>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
이 위에 텍스트 상자가 있는데, 사용자 유형으로 테이블을 검색하고자 합니다.그래서 타이핑을 하면.Gre예를 들어, 테이블의 주황색 줄이 사라지고, 사과와 포도가 남습니다.만약 그들이 계속해서 타이핑을 했다면.Green Gr사과줄은 포도만 남기고 사라져야 합니다.이 점이 분명했으면 좋겠습니다.
그리고 사용자가 텍스트 상자에서 쿼리의 일부 또는 전부를 삭제할 경우, 쿼리와 일치하는 모든 행이 다시 나타나길 바랍니다.
jQuery에서 테이블 행을 제거하는 방법은 알고 있지만 검색을 수행하고 이를 바탕으로 선택적으로 행을 제거하는 방법에 대해서는 잘 모릅니다.이에 대한 간단한 해결책이 있습니까?아니면 플러그인?
누군가가 나에게 올바른 방향을 알려준다면 좋을 것입니다.
감사해요.
제가 만든 예시입니다.
단순 인덱스검색
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
데모: http://jsfiddle.net/7BUmG/2/
정규식 검색
정규식을 사용하는 고급 기능을 통해 행의 모든 순서로 단어를 검색할 수 있습니다.타이핑을 하면 동일하게 동작합니다.apple green아니면green apple:
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
데모: http://jsfiddle.net/dfsq/7BUmG/1133/
디바운스
여러 행과 열에 걸쳐 검색을 사용하여 테이블 필터링을 구현할 때는 성능과 검색 속도/최적화를 고려하는 것이 매우 중요합니다.단순히 매 키 입력마다 검색 기능을 실행해서는 안 된다는 것입니다.필터링이 너무 자주 실행되지 않도록 하려면 해당 필터링을 취소해야 합니다.위의 코드 예제는 다음과 같습니다.
$('#search').keyup(debounce(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
// etc...
}, 300));
Lodash _. debons와 같은 디바운스 구현을 선택하거나 다음 데모(여기서 debons)에서 사용하는 것처럼 매우 간단한 것을 사용할 수 있습니다. http://jsfiddle.net/7BUmG/6230/ 및 http://jsfiddle.net/7BUmG/6231/ .
다음은 HTML 테이블 내부를 검색하는 데 가장 적합한 솔루션으로 테이블의 모든 td, tr, 순수 자바스크립트를 포함하며 가능한 한 짧게 검색합니다.
<input id='myInput' onkeyup='searchTable()' type='text'>
<table id='myTable'>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
<script>
function searchTable() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
</script>
나는 이것을 위한 jquery 플러그인을 가지고 있습니다.jquery-ui도 사용합니다.여기 http://jsfiddle.net/tugrulorhan/fd8KB/1/ 에서 예를 볼 수 있습니다.
$("#searchContainer").gridSearch({
primaryAction: "search",
scrollDuration: 0,
searchBarAtBottom: false,
customScrollHeight: -35,
visible: {
before: true,
next: true,
filter: true,
unfilter: true
},
textVisible: {
before: true,
next: true,
filter: true,
unfilter: true
},
minCount: 2
});
순수 자바스크립트 솔루션 :
모든 열 및 대소문자 구분 안 함에 대해 작동:
function search_table(){
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search_field_input");
filter = input.value.toUpperCase();
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td") ;
for(j=0 ; j<td.length ; j++)
{
let tdata = td[j] ;
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break ;
} else {
tr[i].style.display = "none";
}
}
}
}
}
저는 dfsq의 답변이 매우 유용하다고 생각했습니다.저는 저에게 적용할 수 있는 약간의 수정을 했습니다(다른 사람들에게 유용할 경우를 대비하여 여기에 게시합니다).
- 으로.
classtr - 내 /
class서를 숨김을 g하는 - 를 .
$rows에 한 다기)을 방지합니다.$rows.length시간 계산)
var $rows = $('.wrapper');
var rowsTextArray = [];
var i = 0;
$.each($rows, function () {
rowsTextArray[i] = ($(this).find('.number').text() + $(this).find('.fruit').text())
.replace(/\s+/g, '')
.toLowerCase();
i++;
});
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/\s+/g, '').toLowerCase();
$rows.show().filter(function(index) {
return (rowsTextArray[index].indexOf(val) === -1);
}).hide();
});span {
margin-right: 0.2em;
}<input type="text" id="search" placeholder="type to search" />
<div class="wrapper"><span class="number">one</span><span class="fruit">apple</span></div>
<div class="wrapper"><span class="number">two</span><span class="fruit">banana</span></div>
<div class="wrapper"><span class="number">three</span><span class="fruit">cherry</span></div>
<div class="wrapper"><span class="number">four</span><span class="fruit">date</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>매우 도움이 되는 코드를 주셔서 @dfsq 감사합니다!
저는 몇 가지 조정을 했고 아마도 다른 사람들도 그것을 좋아할 것입니다.엄격한 일치 없이 여러 단어를 검색할 수 있도록 보장했습니다.
예제 행:
- 사과와 배
- 사과와 바나나
- 사과와 오렌지
- ...
첫 'appe' 를됩니다가 됩니다.
두 과'됩니다를 할 수 .
데모: http://jsfiddle.net/JeroenSormani/xhpkfwgd/1/
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');
$rows.hide().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
var matchesSearch = true;
$(val).each(function(index, value) {
matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
});
return matchesSearch;
}).show();
});
이렇게 네이티브 자바스크립트를 사용할 수 있습니다.
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>데이타블 JS 플러그인 또한 HTML 테이블에 대한 검색 기능을 수용할 수 있는 좋은 대안 중 하나입니다.
var table = $('#example').DataTable();
// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
table.search( this.value ).draw();
} );
https://datatables.net/examples/basic_init/zero_configuration.html
순수 자바스크립트와 새로운 구문:
const trs = document.getElementById("myTable").getElementsByTagName("tr");
document.getElementById("search").onkeyup = e => {
for (const tr of trs)
tr.style.display = tr.innerText.toLowerCase().includes(e.target.value.toLowerCase()) ? "" : "none";
}
(는 더 빠른 은 (했습니다) 하는 것입니다.Array.from합니다.map보다는.순수 JS를 사용합니다.
큰 테이블(>1K 행)에서 거의 즉시 사용할 수 있다는 것을 알게 되었습니다.필터를 두 번 실행하는 것을 절약할 수 있는 더 우아한 방법이 있을지 모르겠습니다.
<input id='myInput' onkeyup='searchTable()' type='text'>
<table id='myTable'>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
<script>
function searchTable(){
var term, table;
// get term to search
term = document.getElementById("myInput").value.toLowerCase();
// get table rows, handle as array.
table = Array.from(document.getElementById("myTable").rows);
// filter non-matching rows; these are set to display='none'
table.filter(function(el){return el.textContent.toLowerCase().indexOf(term) ==
-1}).map(x=> x.style.display = "none");
// filter matching rows; these are set to display =''
table.filter(function(el){return el.textContent.toLowerCase().indexOf(term) > -1}).map(x=> x.style.display = "");
}
</script>
테이블을 만들기 위해 템플릿이 포함된 백엔드를 사용합니다. 그렇다면 각 tr에 클래스를 추가하여 헤더 행을 유지하는 것이 충분히 쉽습니다.
<tr class="rowClass"> ... </tr>
다음과 같이 테이블 작성을 수정하여 해당 행에 대해서만 반복할 수 있도록 합니다.
table = Array.from(document.getElementsByClassName("rowClass"));
html과 data를 분리할 수 있다면 데이터 테이블이나 내가 만든 라이브러리 같은 외부 라이브러리를 사용할 수 있습니다.https://github.com/thehitechpanky/js-bootstrap-tables
이 라이브러리는 키업 기능을 사용하여 테이블 데이터를 다시 로드하므로 검색과 같이 작동하는 것으로 보입니다.
function _addTableDataRows(paramObjectTDR) {
let { filterNode, limitNode, bodyNode, countNode, paramObject } = paramObjectTDR;
let { dataRows, functionArray } = paramObject;
_clearNode(bodyNode);
if (typeof dataRows === `string`) {
bodyNode.insertAdjacentHTML(`beforeend`, dataRows);
} else {
let filterTerm;
if (filterNode) {
filterTerm = filterNode.value.toLowerCase();
}
let serialNumber = 0;
let limitNumber = 0;
let rowNode;
dataRows.forEach(currentRow => {
if (!filterNode || _filterData(filterTerm, currentRow)) {
serialNumber++;
if (!limitNode || limitNode.value === `all` || limitNode.value >= serialNumber) {
limitNumber++;
rowNode = _getNode(`tr`);
bodyNode.appendChild(rowNode);
_addData(rowNode, serialNumber, currentRow, `td`);
}
}
});
_clearNode(countNode);
countNode.insertAdjacentText(`beforeend`, `Showing 1 to ${limitNumber} of ${serialNumber} entries`);
}
if (functionArray) {
functionArray.forEach(currentObject => {
let { className, eventName, functionName } = currentObject;
_attachFunctionToClassNodes(className, eventName, functionName);
});
}
}
언급URL : https://stackoverflow.com/questions/9127498/how-to-perform-a-real-time-search-and-filter-on-a-html-table
'code' 카테고리의 다른 글
| 끝에 null로 끝나는 char(\0)가 없는 문자열 정의 (0) | 2023.09.25 |
|---|---|
| 디브 내부의 이미지와 수직으로 정렬하는 앵커 (0) | 2023.09.25 |
| Oracle Database의 데이터를 사용한 Visual Studio 2015 웹 테스트 (0) | 2023.09.25 |
| MySQL에서 고유 ID를 생성하는 방법은? (0) | 2023.09.25 |
| PHP 디버깅은 어떻게 하나요? (0) | 2023.09.25 |