此Javascript過濾功能通過HTML字符搜索

此功能來自w3school的W3.js。此Javascript過濾功能通過HTML字符搜索

此功能應該通過在搜索框中輸入來過濾項目列表。出於某種原因，這包括html中的搜索，而不僅僅是innerHTML中的文本。

E.g.搜索<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>

來源

2017-08-11 Stanley Umeanozie

你可以嘗試使用jQuery和與'的.text更換'.innerHTML'（）'。 – Zulfe

innerText，而不是innerHTML是圍繞這一個簡單的方法。儘管這最初只在Internet Explorer中使用，但它現在已在所有主流瀏覽器中並且是HTML DOM標準的一部分。

"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].innerText.toUpperCase().indexOf(filter.toUpperCase()) > -1) { 
 
     hit = 1; 
 
     } 
 
     c = b[ii].getElementsByTagName("*"); 
 
     for (iii = 0; iii < c.length; iii++) { 
 
     if (c[iii].innerText.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>

來源

2017-08-11 20:48:59 Rhumborl

完美。謝謝。 –

您是否知道我可以如何從搜索中排除

相關問題

此Javascript過濾功能通過HTML字符搜索

回答

相關問題