javascript 간단 한 검색 기능 구현
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
table{
width: 500px;
}
td{
border:1px solid #ccc;
padding:5px;
}
</style>
<script>
window.οnlοad=function(){
var oTb=document.getElementById('tb');
var oldColor=null;
var tName=document.getElementById('name');
var oBtn=document.getElementById('btn');
oBtn.οnclick=function(){
var aRows=oTb.tBodies[0].rows;
for(var i=0;i<aRows.length;i++)
{
var tdValue=aRows[i].cells[1].innerHTML.toLowerCase();
var tNameValue=tName.value.toLowerCase().split(' ');
for(var j=0;j<tNameValue.length;j++)
{
if(tdValue.search(tNameValue[j])>=0)
{
aRows[i].style.background='green';
break;
}
else{
aRows[i].style.background='';
}
}
}
};
};
</script>
</head>
<body>
：<input id='name' type="text"/>
<input id="btn" type="button" value=" " />
<table id="tb">
<thead>
<tr>
<td>ID</td>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>28</td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>A.search(B)는 A 에서 B 의 위 치 를 검색 하여 B 가 나타 난 위 치 를 되 돌려 줍 니 다.
A.split(B)는 A 를 B 로 몇 부분 으로 나 누고 배열 로 돌아 가 단어 조작 에 해당 한다.
실행 결 과 는 다음 과 같 습 니 다.
더 많은 검색 기능 이 실 현 된 멋 진 글 은 주 제 를 클릭 하 십시오javascript 검색 기능 집합 학습 을 진행 하 다
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
