Jquery筛选出数据,将不合适的数据隐藏
- HTML code
<table id="tbInfo"> <tr> <td>价格</td> <td title='price'>500</td> </tr> <tr> <td>价格</td> <td title='price'>400</td> </tr> <tr> <td>价格</td> <td title='price'>600</td> </tr> <tr> <td>价格</td> <td title='price'>300</td> </tr></table>
如何筛选出价格小于500的数据呢?
[解决办法]
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready( function() { $("#tbInfo tr").each( function() { if (parseInt($(this).find("td[title]").eq(0).html()) < 500) $(this).hide(); });});</script></head><body><table id="tbInfo"> <tr> <td>价格</td> <td title='price'>500</td> </tr> <tr> <td>价格</td> <td title='price'>400</td> </tr> <tr> <td>价格</td> <td title='price'>600</td> </tr> <tr> <td>价格</td> <td title='price'>300</td> </tr></table></body></html>
[解决办法]
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script></head><body><table id="tbInfo"> <tr> <td>价格</td> <td title='price'>500</td> </tr> <tr> <td>价格</td> <td title='price'>400</td> </tr> <tr> <td>价格</td> <td title='price'>600</td> </tr> <tr> <td>价格</td> <td title='price'>300</td> </tr></table><script type="text/javascript">var obj = $("#tbInfo tr").clone(true);obj.sort( function (o1, o2) { //return parseInt(o1.getElementsByTagName('td')[1].innerHTML) - parseInt(o2.getElementsByTagName('td')[1].innerHTML); return parseInt($(o1).find("td[title]").eq(0).html()) - parseInt($(o2).find("td[title]").eq(0).html()); });$("#tbInfo").html(obj);</script></body></html>