Filtertabelle mit mehreren Spalten

Nur versuchen, eine Tabelle zu filtern, aber auch die Zahl mit und ohne Bindestriche filtern lassen (funktioniert), aber auch den Namen und die ID suchen. Es durchsucht nur die eine Spalte, da der Index [0] ist.Filtertabelle mit mehreren Spalten

Wie würde ich es alle 3 Spalten durchsuchen lassen? Wenn ich also Nummer oder ID oder Namen suche, würde es filtern. Hier ist der Arbeitscode, den ich bisher zur Nummersuche habe.

<!DOCTYPE html>  
<html> 
<head>  
<style>  
* {  
    box-sizing: border-box;  
} 

#myInput {  
    background-image: url('/css/searchicon.png');  
    background-position: 10px 10px;  
    background-repeat: no-repeat;  
    width: 100%;  
    font-size: 16px;  
    padding: 12px 20px 12px 40px;  
    border: 1px solid #ddd;  
    margin-bottom: 12px;  
} 

#myTable {  
    border-collapse: collapse;  
    width: 100%;  
    border: 1px solid #ddd;  
    font-size: 18px;  
} 

#myTable th, #myTable td {  
    text-align: left;  
    padding: 12px;  
} 

#myTable tr {  
    border-bottom: 1px solid #ddd;  
} 

#myTable tr.header, #myTable tr:hover {  
    background-color: #f1f1f1;  
}  
</style> 

</head>  
<body>   

<h2>Number search</h2>  

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">   

<table id="myTable">  
    <tr class="header">  
    <th style="width:60%;">Number</th> 
    <th style="width:60%;">Name</th> 
    <th style="width:60%;">ID</th>  
    </tr>  
    <tr>  
    <td>905-373-3333</td> 
    <td>Mike</td> 
    <td>4563</td>  
    </tr>  
    <tr>  
    <td>905-333-3333</td> 
    <td>adam</td> 
    <td>8963</td>  
    </tr>  
    <tr>  
    <td>416-373-3432</td> 
    <td>Jim</td> 
    <td>9363</td>  
    </tr>  
</table>   

<script>  
function myFunction() {  
    var input, filter, table, tr, td, i, cleanedFilter;  
    input = document.getElementById("myInput");  
    filter = input.value.toUpperCase();  
    table = document.getElementById("myTable");  
    tr = table.getElementsByTagName("tr");   

    cleanedFilter = filter.replace("-","");   

    for (i = 0; i < tr.length; i++) {  
    td = tr[i].getElementsByTagName("td")[0];    

    if (td) {  
     cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");    

     if (cellContent.indexOf(cleanedFilter) > -1) {  
     tr[i].style.display = "";  
     } else {  
     tr[i].style.display = "none";  
     }  
    }   
    }  
}  
</script>   

</body>  
</html>

Quelle

2017-08-16 redrain1345

Haben Sie darüber nachgedacht, Datentabellen mit (dataTables.net) ? Es tut dies und vieles mehr direkt aus der Box –

Ich würde es gerne so machen, wenn möglich, trotzdem können Sie mir Brian helfen? – redrain1345

Wenn Sie einen Filter für jedes td in Ihrer Zeilen verwenden möchten, können Sie wie folgt vor:

(function(document) { 
 
\t 'use strict'; 
 

 
\t var LightTableFilter = (function(Arr) { 
 

 
\t \t var _input; 
 

 
\t \t function _onInputEvent(e) { 
 
\t \t \t _input = e.target; 
 
\t \t \t var tables = document.getElementsByClassName(_input.getAttribute('data-table')); 
 
\t \t \t Arr.forEach.call(tables, function(table) { 
 
\t \t \t \t Arr.forEach.call(table.tBodies, function(tbody) { 
 
\t \t \t \t \t Arr.forEach.call(tbody.rows, _filter); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t } 
 

 
\t \t function _filter(row) { 
 
\t \t \t var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); 
 
\t \t \t row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; 
 
\t \t } 
 

 
\t \t return { 
 
\t \t \t init: function() { 
 
\t \t \t \t var inputs = document.getElementsByClassName('light-table-filter'); 
 
\t \t \t \t Arr.forEach.call(inputs, function(input) { 
 
\t \t \t \t \t input.oninput = _onInputEvent; 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }; 
 
\t })(Array.prototype); 
 

 
\t document.addEventListener('readystatechange', function() { 
 
\t \t if (document.readyState === 'complete') { 
 
\t \t \t LightTableFilter.init(); 
 
\t \t } 
 
\t }); 
 

 
})(document);

<section class="container"> 
 

 
\t <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter"> 
 

 
\t <table class="order-table table"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Column 1</th> 
 
\t \t \t \t <th>Column 2</th> 
 
\t \t \t \t <th>Number 2</th> 
 
\t \t \t \t <th>Number 2</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Column One</td> 
 
\t \t \t \t <td>Two</td> 
 
\t \t \t \t <td>352353</td> 
 
\t \t \t \t <td>1</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Column Two</td> 
 
\t \t \t \t <td>Two</td> 
 
\t \t \t \t <td>4646</td> 
 
\t \t \t \t <td>2</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 

 
</section>

Quelle

2017-09-20 15:20:03

Wie würde ich diese .js mit meinem HTML verknüpfen? –

@JohnGodlee Fügen Sie den js-Teil in diesem ein: '' in Ihrem HTML-Code. Oder speichern Sie es in einer externen JS-Datei und sehen Sie sich die Anweisungen hier an: https://www.w3schools.com/tags/att_script_src.asp Lassen Sie mich wissen, ob das funktioniert hat :) –

@JohnGodlee Haben Sie es geschafft? –

Filtertabelle mit mehreren Spalten

Antwort

Verwandte Themen