Question

这是我的表，使用tr和td。

NAME Address CITY STATE 
ABC   123    A     CA 
AB8   123    B     CA
AFC   456    B     TX 
POI   985    C     KJ

文件准备好后，它将全部隐藏。

现在我想要一条线来显示所有tr： - ＆GT;列（4）= CA“和”列（3）= B

我厌倦了我的代码：

$("table[id=maintablex] tr td:nth-child(4):contains('CA'), table[id=maintablex] tr td:nth-child(3):contains('B')").closest('tr').show();

但它显示一切都有（4）= CA，（3）= B ......我的代码是“或”，有人可以帮我这个吗？

添加了完整的HTML代码：

<table id="table">
    <tr>
        <td>ABC</td>
        <td>123</td>
        <td>A</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>1234</td>
        <td>B</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>AUF</td>
        <td>123</td>
        <td>C</td>
        <td>TX</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>456</td>
        <td>B</td>
        <td>TX</td>
    </tr>
</table>
<script language="Javascript">
$("table[id=table] tr").hide();

// Code show here


</script>

我想要展示的结果只是：

AB8   123    B     CA

Answer 1

为什么不这样做：

$("table[id=maintablex] tr td:nth-child(3):contains('B')", 
    $("table[id=maintablex] tr td:nth-child(4):contains('CA')")
).closest('tr').show();

我不知道这是否更快，但基于@Jasper的回复，为什么不这样做：

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#table')
    .find('td:nth-child(4):contains("CA")')
    .closest('tr')
    .find('td:nth-child(3):contains("B")')
    .closest('tr')
    .addClass('active');

这是jsfiddle：http://jsfiddle.net/KQMXe/

Answer 2

你的第一个选择器总是匹配State = CA和State = B的行。我会把它分成两部分。没有测试过这段代码，但它应该让你接近......

var stateRows = ("#maintablex tr td:nth-child(4):contains('CA')").parent();
var matchRows = stateRows.find("td:nth-child(3):contains('B')").parent();

matchRows.doWhateverYouLikeWithTheResults();

Answer 3

JS -

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#maintablex').find('td:nth-child(4):contains("CA")').each(function (index, value) {

    //un-hide the parent `<tr>` element of this `<td>` by adding the `active` class to the `<tr>`
    $(this).parents('tr:first').addClass('active');
});

CSS -

/*Hide all the table rows by default*/
tr {
    display : none;
}

/*declare a class that shows the table rows when added to them*/
tr.active {
    display : table-row;
}

<强>更新

我更新了上面的代码，只查找每一行的第三列（之前我已经省略了那部分答案）。

这是一个小伙伴：http://jsfiddle.net/jasper/Mp7Jq/3/

Answer 4

试试这个

$.each($('table#table tr td:nth-child(4):contains("CA")').parent(),function(){
    if(($.inArray(this, $('table#table tr td:nth-child(3):contains("B")').parent())) > -1){
        $(this).show();
    }
});

希望这会有所帮助。：）

jQuery选择多个：nth-child（）

4 个答案:

jQuery选择多个：nth-​​child（）

4 个答案:

jQuery选择多个：nth-child（）