Maison > Article > interface Web > Explication détaillée des étapes pour rechercher et filtrer le contenu d'une certaine colonne du tableau

Explication détaillée des étapes pour rechercher et filtrer le contenu d'une certaine colonne du tableau

php中世界最好的语言original: 2018-05-22 10:30:423694parcourir

Cette fois, je vais vous donner une explication détaillée des étapes de recherche et de filtrage du contenu d'une certaine colonne du tableau. Quelles sont les précautions pour rechercher et filtrer le contenu d'une certaine colonne dans le tableau. le tableau. Ce qui suit est un cas pratique. Levez-vous et jetez un œ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 le rendu,

Statut de démarrage :

Entrez 'e' dans la zone de saisie , et le formulaire sera traité immédiatement. Filtrez, filtrez les lignes contenant 'e' dans le tableau, masquez les lignes sans 'e', utilisez l'outil d'exécution HTML/JS/css en lignehttp://tools.jb51.net/code/HtmlJsRun, l'effet d'exécution du test est le suivant :

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 pense que vous l'avez maîtrisé après avoir lu le cas dans cet article 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 :

Analyse de cas d'accès au serveur local par téléphone mobile NodeJs

$emit et $on parent-enfant frère ou sœur composants en vue Explication détaillée du fonctionnement

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：Caractéristiques Ajax et problèmes de code tronqué (tutoriel graphique)Article suivant：Caractéristiques Ajax et problèmes de code tronqué (tutoriel graphique)

Articles Liés

Voir plus