Need help filternig HTML table with javascript

Question

I am trying to use javascript to remove all table rows lower than the value from an input.

You can try out the code here 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";
        }
    }
}

This is the table.

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

When I type the number 3 into the input, it already removes the first two rows even though this should happen at 30.

If I change the script to this it doesnt happen.

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

I feel stupid for asking, but can somebody tell me what the problem is.

Sorry if my English is hard to understand, it's my third language.

Edit: Thanks for the quick answers, i had a feeling it was somethong like that.

ncardeli · Accepted Answer · 2014-10-13 19:40:35Z

1

You should be using parseInt to convert the string values to int, otherwise a text comparison will take place.

Change your filter function like this:

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

answered Oct 13, 2014 at 19:40

ncardeli

3,5022 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian · Accepted Answer · 2014-10-13 19:41:53Z

0

Your comparison is using string comparison rules, I believe.

Wrap parseInt() around the values that need to be treated as a integers.

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

answered Oct 13, 2014 at 19:41

Brian

1721 silver badge6 bronze badges

Comments

David Holmes · Accepted Answer · 2014-10-13 19:43:45Z

try this

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

Collectives™ on Stack Overflow

Need help filternig HTML table with javascript

3 Answers 3

Comments

Comments

HTML

Javascript

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

HTML

Javascript

Comments

Your Answer

Sign up or log in

Post as a guest

Related