Js筛选table里的数据

求大佬能教一下我怎么筛选数据弄出如图效果吗？html代码和效果图如下

解决方案 »

  1.   

    参考下，希望能帮到你<!DOCTYPE html>
    <html>
    <head>
    <title>xxxxxx</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $('.show_td').click(function(){
    var t = $(this).find('.show_t').text();
    var p = $(this).find('.show_p').text();
    $('.show_area').show();
                    $('.t').text(t);
    $('.p').text(p);
    })
    });
    </script>
    </head>
    <body>
    <table border="1">
    <tr>
    <td class="show_td">
    <div>
    <span class="show_t">葡韵手信</span>
    <span>￥<span class="show_p">100</span></span>
    </div>
    </td>
    <td class="show_td">
    <div>
    <span class="show_t">巧克力</span>
    <span>￥<span class="show_p">300</span></span>
    </div>
    </td>
    </tr>
    </table>
    <div class="show_area" style="display:none;">
    <span class="t"></span>
    <span class="p"></span>
    </div></body>
    </html>