Question

我有一个表格设置如下：

<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），请跳过整行。

Answer 1

我只是回答这个问题，因为可怕的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";
    }
})();

Answer 2

使用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，我发现像text()这样的jQuery选择器和方法更容易编写，并且比他们在普通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>标签内，该标签可能用于为某些定价商品设计不同的样式。您的应用程序的标记可能永远不会改变，但这些事情确实会发生。当他们这样做时，很高兴有可读的代码，如果有必要可以轻松更改，甚至更好的代码不必更改。

使用JS隐藏表的某些行，如果

2 个答案: