이 기사에서는 테이블 데이터를 구현하기위한 JS의 다양한 검색 기능에 대해 설명합니다. 케이스, 퍼지 검색 및 여러 키 검색을 무시할 수 있습니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<제목> </title>
<script type = "text/javaScript">
Window.onload = function () {
var otab = document.getElementById ( "탭");
var obt = document.getElementsByTagName ( "입력");
OBT [1] .onclick = function () {
for (var i = 0; i <otab.tbodies [0] .rows.length; i ++)
{
var str1 = otab.tbodies [0] .rows [i] .cells [1] .innerhtml.touppercase ();
var str2 = obt [0] .Value.toupperCase ();
// string.toupperCase ()를 사용합니다 (문자열의 모든 문자를 대문자로 변환) 또는 String.tolowerCase () (문자열의 모든 문자를 소문자로 변환)
// 대문자와 소문자를 무시하기위한 소위 검색은 사용자가 입력 한 모든 문자열을 대문자 또는 소문자로 변환 한 다음 정보 테이블의 모든 문자열을 대문자 또는 소문자로 변환하고 마지막으로이 둘의 변환 된 문자를 비교하는 것입니다.
/********************************* JS 구현 테이블이 사례 검색을 무시합니다 ****************************/
if (str1 == str2) {
otab.tbodies [0] .rows [i] .style.background = '빨간색';
}
또 다른{
otab.tbodies [0] .rows [i] .style.background = '';
}
/************************************* JS는 테이블의 퍼지 검색을 구현합니다 ************************/
// 테이블의 퍼지 검색은 형식, string1.search (string2)를 사용하여 js에서 search () 메소드를 사용하는 것입니다.
// 사용자가 입력 한 문자열은 기본 문자열에서 하위 문자열의 위치를 반환합니다. 일치하지 않으면 -1을 반환합니다. 따라서 작업은 다음과 같습니다
if (str1.search (str2)! = -1) {otab.tbodies [0] .rows [i] .style.background = 'red';}
else {otab.tbodies [0] .rows [i] .style.background = '';}
/*********************************** JS는 테이블에 대한 멀티 키워드 검색을 구현합니다 **************************/
// 테이블에서 여러 키워드를 검색합니다. 사용자가 입력 한 여러 키워드를 추가하면 분할 메소드를 사용하여 긴 문자열을 표준으로 공백을 가진 문자열 배열로 나눕니다.
// 그런 다음 컷 배열의 하위 문자열을 루프의 정보 테이블의 문자열과 비교합니다.
var arr = str2.split ( '');
for (var j = 0; j <arr.length; j ++)
{
if (str1.search (arr [j])! = -1) {otab.tbodies [0] .rows [i] .style.background = 'red';}
}
}
}
}
</스크립트>
</head>
<body>
이름 : <입력 유형 = "텍스트" />
<입력 유형 = "버튼"value = "검색"/>
<테이블 borderColor = "blue"id = "tab">
<헤드>
<td> <h2> id </h2> </td>
<td> <h2> 이름 </h2> </td>
<td> <h2> Age </h2> </td>
</head>
<tbody>
<tr>
<td> 1 </td>
<td> 블루 </td>
<td> 15 </td>
</tr>
<tr>
<td> 2 </td>
<td> mikyou </td>
<td> 26 </td>
</tr>
<tr>
<td> 3 </td>
<td> 약한 </td>
<td> 24 </td>
</tr>
<tr>
<td> 4 </td>
<td> 스카이 </td>
<td> 35 </td>
</tr>
<tr>
<td> 5 </td>
<td> li si </td>
<td> 18 </td>
</tr>
</tbody>
</테이블>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.