0
この関数はw3schoolのW3.jsにあります。このJavaScript関数はHTML文字を検索します
この関数は、検索ボックスに入力することで項目のリストをフィルタリングすることになっています。 何らかの理由で、これにはinnerHTMLのテキストだけでなく、検索のhtmlが含まれます。
など。 <td>を検索すると、すべての行が返されます。要素内でテキストにのみ使用するにはどうすればよいですか？
"use strict";
var w3 = {};
w3.getElements = function (id) {
if (typeof id == "object") {
return [id];
} else {
return document.querySelectorAll(id);
}
};
w3.filterHTML = function(id, sel, filter) {
var a, b, c, i, ii, iii, hit;
a = w3.getElements(id);
for (i = 0; i < a.length; i++) {
b = w3.getElements(sel);
for (ii = 0; ii < b.length; ii++) {
hit = 0;
if (b[ii].innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
hit = 1;
}
c = b[ii].getElementsByTagName("*");
for (iii = 0; iii < c.length; iii++) {
if (c[iii].innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
hit = 1;
}
}
if (hit == 1) {
b[ii].style.display = "";
} else {
b[ii].style.display = "none";
}
}
}
};<input oninput="w3.filterHTML('#id01', '.item', this.value)" placeholder="Search for names..">
<table id="id01" border="1">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr class="item">
<td>John Doe</td>
<td>Berlin</td>
<td>Germany</td>
</tr>
<tr class="item">
<td>Berglunds snabbköp</td>
<td>Luleå</td>
<td>Sweden</td>
</tr>
<tr class="item">
<td>Centro comercial Moctezuma</td>
<td>México D.F.</td>
<td>Mexico</td>
</tr>
</table>
あなたはjQueryのを使用して 'は.text（）'と '.innerHTML'を交換してみてください。 – Zulfe