Jquery筛选出数据,将不合适的数据隐藏


<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的数据呢?

解决方案 »

  1.   

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

  2.   

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

  3.   

    弄复杂一点哈<table id="tbInfo">
     <tr>
      <td>价格</td>
      <td><span title="price">500</span></td>
     </tr>
     <tr>
      <td>此价格有点贵!</td>
     </tr>
     <tr>
      <td>价格</td>
      <td><span title="price">300</span></td>
     </tr>
     <tr>
      <td>此价格还合适</td>
     </tr>
     <tr>
      <td>价格</td>
      <td><span title="price">200</span></td>
     </tr>
     <tr>
      <td>此价格略低,是假货吧?</td>
     </tr>
     <tr>
      <td>价格</td>
      <td><span title="price">400</span></td>
     </tr>
     <tr>
      <td>次价格是高了点,相信质量也不错</td>
     </tr>
    </table>获取200到400之间的数据,其他隐藏(相应的解释性说明也隐藏),不能对tr td 增加其他属性(id,name,class,title,tag等等)
      

  4.   

    增加一个条件
    <tr title="1">
      <td>价格</td>
      <td><span title="price">500</span></td>
     </tr>
     <tr title="1">
      <td>此价格有点贵!</td>
     </tr>
    <tr title="2">
      <td>价格</td>
      <td><span title="price">400</span></td>
     </tr>
     <tr title="2">
      <td>次价格是高了点,相信质量也不错</td>
     </tr>即:价格与解释性说明的title是一样的名称,只是每一个价格的title不一样