jQuery 在主表中只选择 tr/td，而不是嵌套表答案

【问题标题】：jQuery select only tr/td in main table, not nested tablesjQuery 在主表中只选择 tr/td，而不是嵌套表
【发布时间】：2018-06-30 02:22:36
【问题描述】：

html代码

<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 吗？

【问题讨论】：

为什么不给身份证/班级？

标签： javascript php jquery html-table

【解决方案1】：

以下方法基于“积极思考”：我们不排除内部表，而是仅包括外部表和正确的元素：

$("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() 方法，该方法只选择直系后代（子代）。

【讨论】：

是的，这比我使用 not() 的答案要好。我不知道<tbody>。

【解决方案2】：

在所有 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>

【讨论】：

【解决方案3】：

我有一个不需要向 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);
});

【讨论】：