Tabelle durchsuchen mit jQuery Script
Hallo zusammen,
Versuche zurzeit eine HTML Tabelle zu durchsuchen.
Klappt auch soweit ganz gut, nur wollte ich gerne noch zwei Sachen erweitern an dem Script:
1. Momentan kann ich immer nur nach einem Wort suchen, jedoch würde ich gerne nach mehreren Wörtern suchen:
Also ich hab quasi ne Tabelle mit einer Spalte "Name" und einer "Vorname", wenn ich jetzt in mein Suchfeld "Hans" eingebe dann zeigt er mir alle Zeilen an in der Hans steht
Wenn ich jedoch "Hans Meier" eingebe zeigt er mir leider nichts mehr an. Komm da leider nicht dahinter an was das das liegt, ist das mit diesem Script überhaupt möglich?
2. Würde ich gern einige "Standart-Suchbegriffe" Per Button in das Suchfeld eintragen (oder Wenn geklickt einfach zur Suche hinzufügen.
Kann mir da wer weiterhelfen?
Der hier verwendete Code
<link rel="stylesheet" href="/css_webseite/bootstrap.min.css">
<hr>
<div class="container">
<div class="row">
<div class="col-md-7">
<h2>My Customers</h2>
</div>
<div class="col-md-4">
<input type="text"
class="form-control search-filter"
id="search_filter"
onkeyup="searchtable()"
placeholder="Search in table."
title="Type in a name">
</div>
</div>
<div class="row">
<table class="table table-bordered" id="table-list">
<tr class="header bg-success">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Laughing Alimentari Winecellars</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</div>
</div>
<script>
function containsAll(toSearch, words) {
for (var i = 0; i < words.length; i++) {
if (toSearch.indexOf(words[i]) === -1)
return false;
}
return true;
}
function searchtable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search_filter");
filter = input.value.toUpperCase();
table = document.getElementById("table-list");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
let wort=filter.split(' ');
let wo=tr[i].textContent.toUpperCase();
let back=containsAll(wo,wort)
if(back==true){
tr[i].style.background = "green";
}else{
tr[i].style.background = "red";
}
}
}
</script>