-1

我有一个这样设置的表：

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

使用 JavaScript，如何根据一个或多个单元格的数量隐藏行？就像如果（价格小于 5），或者（价格小于 10 并且数量大于 1,000），则跳过整行。

4

2 回答 2

2

我只是回答这个问题，因为可怕的 jQuery 答案需要有一个替代品。

将以下内容放在<script>表格后面的任何位置的标记中：

(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";
    }
})();
于 2013-02-05T00:25:20.247 回答
1

使用 jQuery，你可以做类似的事情

$.each($('tr'), function(tri, tr) {
    var $tr = $(tr),
        price = parseFloat($tr.find('td:nth-child(2)').text()replace(/,/g, "")),
        quantity = parseInt($tr.find('td:first-child').text()replace(/,/g, ""));
    if (price < 5) $tr.hide(); 
    //repeat for other conditions, like if(price < 10 && quantity > 1000)
});

至于为什么你可能更喜欢使用像 jQuery 这样的库而不是使用 vanilla js 来完成这样的任务，我发现 jQuery 选择器和类似的方法text()比纯 JavaScript 中的对应物更容易编写和阅读。此外，我发现使用 jQuery 选择器完成的代码比通过手动遍历 DOM 完成的代码要少得多。例如，如果标记更改为包含链接或样式元素，则无需更新此代码。

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

在上面的例子中，标记发生了变化；价格现在包含在<span>标签中，该标签可用于对某些定价项目进行不同的样式设置。您的应用程序的标记可能永远不会改变，但这些事情确实会发生。当他们这样做时，拥有易于更改的可读代码是一件好事，如果您的代码不必更改，那就更好了。

于 2013-02-04T23:52:24.813 回答