需要帮助使用JavaScript过滤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";
        }
    }
}