JavaScript Tabellenfilter sucht nicht nach Zahlen

ich möchte dynamisch basierend auf Inhalt filtern, und es funktioniert für die ersten 2 Spalten, aber nicht für die dritte.JavaScript Tabellenfilter sucht nicht nach Zahlen

Nicht sicher über das Javascript könnte ein bisschen extra brauchen?

Hier ist mein Snippet:

`https://www.w3schools.com/code/tryit.asp?filename=FD3GYTW0WBUK`

Hier ist mein html:

<h2>My Customers</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%;">Name</th> 
    <th style="width:40%;">Country</th> 
    <th style="width:40%;">Table</th> 
    </tr> 
    <tr> 
    <td>Alfreds Futterkiste</td> 
    <td>Germany</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>Berglunds snabbkop</td> 
    <td>Sweden</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>Island Trading</td> 
    <td>UK</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>Koniglich Essen</td> 
    <td>Germany</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>Laughing Bacchus Winecellars</td> 
    <td>Canada</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>Magazzini Alimentari Riuniti</td> 
    <td>Italy</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>North/South</td> 
    <td>UK</td> 
    <td>200</td> 
    </tr> 
    <tr> 
    <td>Paris specialites</td> 
    <td>France</td> 
    <td>200</td> 
    </tr> 
</table>

hier ist meine JS:

* { 
    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; 
}

function myFunction() { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    } 
}

hier meine CSS

Danke,

Quelle

2017-02-25 Chris

Bitte bearbeiten Sie Ihre Frage, um den entsprechenden Code direkt in der Frage anzuzeigen. – nnnnnn

a) Deine Geige funktioniert überhaupt nicht, und b) Wenn a) behoben ist, funktioniert sie nur für die Namensspalte, nicht für die ersten beiden Spalten, wie du in Anspruch nimmst, und c) du kannst ein "Arbeits - Snippet" in deiner Frage und nicht nur Codefragmente: p –

In Ihrem js, sagen Sie

td = tr[i].getElementsByTagName("td")[0];

Damit Sie den Inhalt in tr testen [i] (jedes tr), aber nur in td [0], das passiert zu sein die erste Spalte. Dieses Skript macht genau das, was Sie hier geschrieben haben. Sie müssen auch alle tds in jedem tr durchlaufen, damit dies wie erwartet funktioniert.

Quelle

2017-02-25 01:38:36 Psi

JavaScript Tabellenfilter sucht nicht nach Zahlen

Antwort

Verwandte Themen