CODEWITHSUNDEEP
javascripthtml
Snyden
Snyden

Reputation: 3

Need help filternig HTML table with javascript

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.

Upvotes: 0

Views: 92

Answers (3)

David Holmes
David Holmes

Reputation: 41

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

Upvotes: 0

Brian
Brian

Reputation: 172

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

Upvotes: 0

ncardeli
ncardeli

Reputation: 3492

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

Upvotes: 1

Related Questions