Maison > Article > interface Web > Utilisez JS pour effectuer une recherche et un filtrage instantanés du contenu des colonnes du tableau

Utilisez JS pour effectuer une recherche et un filtrage instantanés du contenu des colonnes du tableau

php中世界最好的语言original: 2018-05-30 11:17:371991parcourir

Cette fois, je vais vous apporter quelques précautions concernant l'utilisation de JS pour effectuer une recherche et un filtrage en temps réel du contenu des colonnes d'un tableau. Ce qui suit est un cas pratique, jetons un coup d'œil.

Parfois, nous lisons les données de la base de données et les affichons dans le tableau. À ce moment-là, une nouvelle exigence apparaît : nous devons saisir des mots-clés dans un champ de recherche et filtrer le contenu du tableau en temps réel. .

Déclencher une requête de base de données immédiatement, puis rappeler pour l'afficher, cela semblera lent, fera glisser le serveur et réduira l'expérience utilisateur. À ce stade, s'il existe une opération pure js à effectuer en temps réel. filtrage d'une certaine colonne du tableau, cela permettra non seulement d'améliorer la vitesse de recherche sans occuper les ressources du serveur, et les utilisateurs seront naturellement satisfaits.

L'implémentation est la suivante, regardez d'abord les rendus,

État de démarrage :

Code d'implémentation :

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

Je crois vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment développer des composants glisser-déposer de Vue

Comment utiliser le modèle frontal de nœud Balise moteur Jade

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Angular4 intègre le composant de téléchargement de ng2-file-uploadArticle suivant：Angular4 intègre le composant de téléchargement de ng2-file-upload

Articles Liés

Voir plus