[英]Need help filternig HTML table with javascript
我正在嘗試使用javascript刪除所有低於輸入值的表行。
您可以在此處嘗試代碼http://liveweave.com/1RwU1D
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(e.innerHTML < document.getElementById("filterValue").value) {
e.parentNode.style.display="none";
}
}
}
這是桌子。
<input id="filterValue" type="text" onkeyup="filter();">
<table>
<tr>
<td class="name">test</td>
<td class="value">10</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">20</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">30</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">40</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">50</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">60</td>
</tr>
</table>
當我在輸入中鍵入數字3時,即使這應該發生在30號,它也已經刪除了前兩行。
如果我將腳本更改為此,則不會發生。
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(e.innerHTML < 3) {
e.parentNode.style.display="none";
}
}
我問這個問題很愚蠢,但是有人可以告訴我問題是什么。
抱歉,如果我的英語很難聽,那是我的第三語言。
編輯:感謝您的快速答復,我有一種感覺。
您應該使用parseInt將字符串值轉換為int,否則將進行文本比較。
像這樣更改您的filter
功能:
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(parseInt(e.innerHTML, 10) < parseInt(document.getElementById("filterValue").value,10) ) {
e.parentNode.style.display="none";
}
}
}
我相信您的比較使用的是字符串比較規則。
將parseInt()包裹在需要視為整數的值周圍。
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(parseInt(e.innerHTML) < parseInt(document.getElementById("filterValue").value)) {
e.parentNode.style.display="none";
}
}
}
嘗試這個
<input id="filterValue" type="text" onkeyup="filter();">
<table>
<tr>
<td class="name">test</td>
<td class="value">10</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">20</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">30</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">40</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">50</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">60</td>
</tr>
</table>
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(parseInt(e.innerHTML) < parseInt(document.getElementById("filterValue").value)) {
e.parentNode.style.display="none";
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.