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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!