Question

I have a table set up as such:

<table id="Table" class="sortable">
<col class="quantity"></col>
<col class="price"></col>
<col class="total"></col>
<thead>
<tr>    
<th class="right">Quantity</th>
<th class="right">Price</th>
<th class="right">Total</th>
</tr>
</thead>
<tbody>

<tr>
<td class="right">50,000</td>
<td class="right" sorttable_customkey="10.25">10.25</td>
<td class="right" sorttable_customkey="512500">512,500</td>
</td>
</tr>

<tr>
<td class="right">1,250</td>
<td class="right" sorttable_customkey="8.1">8.10</td>
<td class="right" sorttable_customkey="101125">101,125</td>
</td>
</tr>
</tbody>
</table>

Using JavaScript, how can I hide rows based on the quantity of one or more cells? Like if (the price is less than 5), or (the price is less than 10 and quantity is greater than 1,000), have the whole row skipped over.

Answer 1

I’m only answering this because the horrendous jQuery answer needs to have a substitute.

Place the following in a <script> tag anywhere after the table:

(function() {
    var tbl = document.getElementById('Table'),
        rows = tbl.tBodies[0].children, l = rows.length, i,
        filter = function(cells) {
            var values = [
                parseInt(cells[0].firstChild.nodeValue.replace(/,/g,''),10),
                parseFloat(cells[1].firstChild.nodeValue.replace(/,/g,'')),
                parseFloat(cells[2].firstChild.nodeValue.replace(/,/g,''))
            ];
            // THIS IS WHERE YOUR CONDITIONS GO
            if( values[1] < 5) return false;
            if( values[1] < 10 && values[0] > 1000) return false;
            return true;
        };
    for( i=0; i<l; i++) {
        if( !filter(rows[i].cells)) rows[i].style.display = "none";
    }
})();