隐藏表B中已出现在表A中的行

时间:2015-11-01 01:37:30

标签: javascript jquery html

使用此代码:


    var table1 = $('#TableA').find('td:eq(1)').text();

    var table2 = $("#TableB tr:gt(0)");

    table2.each(function (i) {
        var tds = $(this).children('td');
        var type= +tds.eq(0).text();
        var price = +tds.eq(1).text();
        if (price == table1) {
            var myTable = table2.filter(function () {
                var tds = $(this).children('td');

            })
            myTable.add(this).hide()
        }
    })

我的Html页面结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table id="TableA">
        <tr>
            <th>Type</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Ref No</th>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>50</td>
            <td>6</td>
            <td>#101255</td>
        </tr>
        <tr>
            <td>Speaker</td>
            <td>300</td>
            <td>6</td>
            <td>#21165</td>
        </tr>
    </table>
    <table id="TableB">
        <tr>
            <th>Type</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Ref No</th>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>50</td>
            <td>6</td>
            <td>#101255</td>
        </tr>
        <tr>
            <td>Speaker</td>
            <td>300</td>
            <td>6</td>
            <td>#21165</td>
        </tr>
        <tr>
            <td>Keyboard</td>
            <td>150</td>
            <td>7</td>
            <td>#31234</td>
        </tr>
    </table>

</body>
</html>

“图像中的第二个表是表B”

我的表B由此改变: Before

对此:After

现在我的问题是,只隐藏了一行。仍然显示“扬声器”所在的行。我知道我必须使用一个循环,但我不知道在哪里实现循环以及如何。我是新手程序员,我知道我需要更多练习。请帮忙提前谢谢

1 个答案:

答案 0 :(得分:0)

<script type="text/javascript">
    $('body').click(function(e){

        var table1_tr = $('#TableA').find('tr'); <!--get the rows of first table-->
        var table2 = $("#TableB tr:gt(0)");

        table1_tr.each(function(i,e){ <!-- loop through rows of first table -->
            var table1 = $(e).find('td:eq(1)').text();
            table2.each(function (i) {
                var tds = $(this).children('td');
                var type= +tds.eq(0).text();
                var price = +tds.eq(1).text();
                if (price == table1) {
                    var myTable = table2.filter(function () {
                        var tds = $(this).children('td');

                    })
                    myTable.add(this).hide()
                }
            });
        })
    });

</script>

您正在使用第二个表的所有行的price文本检查第一个表的第一行中td的文本

我修改了脚本以循环遍历第一个表的行,并使用第二个表的所有行检查它们 希望这有帮助