suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie JS, um eine sofortige Suche und Filterung von Tabellenspalteninhalten durchzuführen

Verwenden Sie JS, um eine sofortige Suche und Filterung von Tabellenspalteninhalten durchzuführen

php中世界最好的语言
php中世界最好的语言Original
2018-05-30 11:17:372050Durchsuche

Dieses Mal werde ich Ihnen einige Vorsichtsmaßnahmen zur Verwendung von JS für die Echtzeitsuche und Filterung von Tabellenspalteninhalten vorstellen. Das Folgende ist ein praktischer Fall.

Manchmal lesen wir die Daten aus der Datenbank und zeigen sie in der Tabelle an. Zu diesem Zeitpunkt kommt eine neue Anforderung, die darin besteht, Schlüsselwörter in ein Suchfeld einzugeben und den Inhalt der Tabelle in Echtzeit zu filtern . .

Wenn Sie die Datenbankabfrage sofort auslösen und dann zurückrufen, erscheint die Anzeige langsam, zieht den Server herunter und verringert die Benutzererfahrung. Wenn zu diesem Zeitpunkt eine reine JS-Operation zum Durchführen einer Echtzeitfilterung vorliegt In einer bestimmten Spalte der Tabelle wird dies nicht nur der Fall sein Es kann die Suchgeschwindigkeit verbessern, ohne Serverressourcen zu belegen, und die Benutzer werden natürlich zufrieden sein.

Die Implementierung ist wie folgt, schauen Sie sich zuerst die Renderings an,

Startstatus:

Implementierungscode: 

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

Ich glaube, das haben Sie Ich habe es gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So entwickeln Sie Vue-Drag-and-Drop-Komponenten

So verwenden Sie die Node-Frontend-Vorlage Motor Jade-Tag

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um eine sofortige Suche und Filterung von Tabellenspalteninhalten durchzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Angular4 integriert die Upload-Komponente von ng2-File-UploadNächster Artikel：Angular4 integriert die Upload-Komponente von ng2-File-Upload

In Verbindung stehende Artikel

Mehr sehen