Tabelle durchsuchen
Durchsuche in allen Spalten und Reihen nach einen Wort
Der hier verwendete Code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/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>