jQuery只选择主表中的tr/td,不选择嵌套表


jQuery select only tr/td in main table, not nested tables

html code

<table class="fruits" border="1">
<tr>
    <td>Apple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Apple</td>
</tr>
<tr>
    <td>Pineapple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Pineapple</td>
</tr>
<tr>
    <td>Watermelon</td>
    <td>$3.20</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Watermelon</td>
</tr>
<tr>
    <td>Orange</td>
    <td>$1.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Orange</td>
</tr>

jQuery

var table = $("table");
table.find('tr').each(function (i) {
    var $tds = $(this).find('td'),
    fruit = $tds.eq(0).text(),
    buy = $tds.eq(3).text()         
    alert(fruit +" "+ buy);     
});

我想单击按钮并选择列1和4中的项目,但这是另一个嵌套表,因此在jQuery中编码给我错误的信息。下面有人能帮我学习jQuery吗?

以下方法基于"积极思考":我们不排除内部表,而只包括外部表和适当的元素:

$("table.fruits > tbody > tr")
.each(function (i) {
    var $tds = $(this).children('td'),
    fruit = $tds.eq(0).text(),
    buy = $tds.eq(3).text()         
    console.log(fruit +" "+ buy);     
});

如果表中可能包含thead元素,则可能需要修改代码。

这个简单的版本使用选择器table.fruits > tbody > tr选择外部表的所有行(而不是任何内部表的任何行)。在DOM中,tr元素不作为table的子元素出现,而是作为tbody(或thead)的子元素出现,即使没有使用<tbody>标记。

在处理一行时,最好使用children()方法,它只选择直接的后代(子)。

在所有tr中写入class="f1"(您可以在html中检查)。工作代码如下:

<script>
    $(document).ready(function() {  
    var table = $("table.fruits"); 
    table.find('tr.f1').each(function (i) {  //this will find only tr which have class f1 not nested table . 
    var $tdsfirst = $(this).find('td:first');// find first td 
    var $tdslast = $(this).find('td:last');  //find last td
    fruit = $tdsfirst.text();
    buy = $tdslast.text();            
    alert(fruit +" "+ buy);     
}); 
  } ); 

   </script>  
<table class="fruits" border="1">
<tr class="f1">
    <td>Apple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Apple</td>
</tr> 
<tr class="f1"> 
    <td>Pineapple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Pineapple</td>
</tr>
<tr class="f1">
    <td>Watermelon</td>
    <td>$3.20</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Watermelon</td>
</tr> 
<tr class="f1">
    <td>Orange</td>
    <td>$1.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Orange</td>
</tr>
</table> 

我有一个不需要向HTML添加类的解决方案。主要依赖于not()选择器。

JSFiddle: http://jsfiddle.net/kdNng/

$("table.fruits tr").not("table table tr").each(function ()
{
    var tds = $(this).children('td');
    var fruit = tds.eq(0).text();
    var buy = tds.eq(3).text();
    alert(fruit +" "+ buy);
});