用javascript需要帮助filternig HTML表

Question

我正在尝试使用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";
    }
}

我觉得愚蠢，但有人可以告诉我问题是什么。

对不起，如果我的英语很难理解，那就是我的第三语言。

编辑：感谢您的快速回答，我感觉它就像那样。

Answer 1

您应该使用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";
        }
    }
}

Answer 2

我相信您的比较是使用字符串比较规则。

将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";
        }
    }
}

Answer 3

试试这个

HTML

<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>

的Javascript

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";
        }
    }
}