basti1012.bplaced.net

Durchsuche in allen Spalten und Reihen nach einen Wort

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>