开发者问题收集

需要帮助使用 javascript 过滤 HTML 表格

2014-10-13
86
javascript html

我试图使用 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";
    }
}

我觉得自己问这个问题很愚蠢，但有人能告诉我问题出在哪里吗？

抱歉我的英语很难理解，这是我的第三语言。

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

3个回答

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

我认为，您的比较使用了字符串比较规则。

用 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";
        }
    }
}
Brian
2014-10-13

尝试一下

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";
        }
    }
}
David Holmes
2014-10-13