Home > Article > Web Front-end > Detailed explanation of the steps to search and filter the contents of a certain column in the table

Detailed explanation of the steps to search and filter the contents of a certain column in the table

php中世界最好的语言Original: 2018-05-22 10:30:423728browse

This time I will bring you a detailed explanation of the steps to search and filter the content of a certain column in the table. What are the precautions for searching and filtering the content of a certain column in the table. The following is a practical case. Get up and take a look.

Sometimes, we read the data from the database and display it in the table. At this time, a new requirement comes. We need to enter keywords in a search box and filter the contents of the table in real time. .

However, triggering a database query immediately and then calling back the display will appear slow, drag down the server, and reduce the user experience. At this time, if there is a pure js operation to perform real-time filtering of a certain column of the table, this will not only It can improve the search speed without occupying server resources, and users will naturally be satisfied.

The implementation is as follows, first look at the renderings,

Start status:

Enter 'e' in the input box, and the form will be processed immediately Filter, filter the rows containing 'e' in the table, hide the rows without 'e', use Online HTML/JS/css running toolhttp://tools.jb51. net/code/HtmlJsRun, the test running effect is shown in the figure below:

Implementation code:

<!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>

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Detailed explanation of the steps to search and filter the contents of a certain column in the table

Related articles