집 >웹 프론트엔드 >JS 튜토리얼 >테이블의 특정 열 내용을 검색하고 필터링하는 단계에 대한 자세한 설명

테이블의 특정 열 내용을 검색하고 필터링하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-22 10:30:423789검색

이번에는 표의 특정 열을 검색하고 필터링하는 단계에 대해 자세히 설명하겠습니다. 표의 특정 열을 검색하고 필터링할 때 주의 사항은 무엇입니까? 사례를 살펴보겠습니다.

때때로 데이터베이스에서 데이터를 읽어 테이블에 표시하는 경우가 있는데, 이때 검색창에 키워드를 입력하고 테이블의 내용을 실시간으로 필터링해야 한다는 것입니다.

데이터베이스 쿼리를 즉시 트리거한 다음 다시 호출하면 디스플레이가 느리게 나타나 서버가 아래로 드래그되고 사용자 경험이 감소합니다. 이때 특정 열을 실시간 필터링하는 순수 js 작업이 있는 경우 표를 보면 검색 속도를 향상시킬 수 있을 뿐만 아니라 서버 자원을 점유할 필요도 없어 사용자는 자연스럽게 만족하게 됩니다.

구현은 다음과 같습니다. 먼저 렌더링을 살펴보세요.

시작 상태:

입력 상자에 'e'를 입력하면 테이블이 즉시 필터링되고, 필터에 'e'가 포함된 행이 필터링됩니다. 테이블이 필터링되고 'e'가 없는 행이 필터링됩니다. 숨기려면 온라인 HTML/JS/css 실행 도구http://tools.jb51.net/code/HtmlJsRun을 사용하세요. 테스트 실행 효과.

구현 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> JS搜索筛选table列</title>
</head>
<script type="text/javascript">
function onSearch(obj){//js函数开始
  setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
    var storeId = document.getElementById('store');//获取table的id标识
    var rowsLength = storeId.rows.length;//表格总共有多少行
    var key = obj.value;//获取输入框的值
    var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起
    for(var i=1;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
      var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值
      if(searchText.match(key)){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
        storeId.rows[i].style.display=&#39;&#39;;//显示行操作，
      }else{
        storeId.rows[i].style.display=&#39;none&#39;;//隐藏行操作
      }
    }
  },200);//200为延时时间
}
</script>
<body>
<p > <input name="key" type="text" id="key" onkeydown="onSearch(this)" value="" /></p>
<table width="200" border="1" id="store"><!-- id与函数的getId一致 -->
 <tr bgcolor="#CCCCCC">
  <td>name</td>
  <td> </td>
  <td> </td>
 </tr>
  <td>good</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>better</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>best</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>bad</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>worse</td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td>worst</td>
  <td> </td>
  <td> </td>
 </tr>
</table>
</body>
</html>

믿으세요. 이 기사의 사례를 읽은 후 방법을 숙지하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!