-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を使用して、1つ以上のセルの数に基づいて行を非表示にするにはどうすればよいですか？（価格が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)
});

バニラjsを使用する代わりに、このようなタスクにjQueryのようなライブラリを使用することを好む理由については、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 に答える