仅选择主表中的 tr,而不选择嵌套表

发布于 2024-11-09 12:34:53 字数 2330 浏览 0 评论 0原文

这个问题之前已经被问过,请参阅: jQuery 仅选择tr/td 在主表中,而不是嵌套表中。 但是它对我来说并不是一个解决方案。

      $("#tablePartners tr:odd").addClass("odd");
      $("#tablePartners tr:even").hide();
      $("#tablePartners tr:first-child").show();

      $("#tablePartners tr.odd").click(function(){
          $(this).next("tr").toggle();
          $(this).find(".arrow").toggleClass("up");
      });

该代码对于切换表上的行效果很好,但是,当我在表中嵌套表时它会中断:

<table id="tablePartners">
    <thead>
        <tr>

            <th>Name</th>
            <th>Description</th>
            <th>Address</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><a href="#">Partner Name</a></td>
        <td>Random description</td>
        <td>1 Random Street</td>
        <td><div class="arrow"></div></td>
    </tr>
       <tr>
            <td colspan="4">
               <table>
                    <tr>
                        <td><b>Phone</b></td>
                        <td>0123456789</td>
                    </tr>
                    <tr>
                        <td><b>Contact Name</b></td>
                        <td>Jamie</td>
                    </tr>
               </table>

            </td>
        </tr>
    </tbody>
</table>

我尝试这样做以仅将事件应用于父表而不是嵌套表(如另一个问题中所建议的)线程),但它不起作用:

  $("#tablePartners>tbody>tr:odd").addClass("odd");
  $("#tablePartners>tbody>tr:even").hide();
  $("#tablePartners>tbody>tr:first-child").show();

  $("#tablePartners>tbody>tr.odd").click(function(){
      $(this).next("tr").toggle();
      $(this).find(".arrow").toggleClass("up");
  });

编辑:通过不起作用,我的意思是:切换事件不起作用并且奇数行没有隐藏。在第一个 JavaScript 中,切换有效,奇数行被隐藏,但嵌套表奇数行也被隐藏,这是我不想要的。

我认为这一定是微不足道的,但我的视野狭隘。

我把它放在jsfiddle上: http://jsfiddle.net/9eJ8y/2/

This question has been asked before, see: jQuery select only tr/td in main table, not nested tables. however it didn't work as a solution for me.

      $("#tablePartners tr:odd").addClass("odd");
      $("#tablePartners tr:even").hide();
      $("#tablePartners tr:first-child").show();

      $("#tablePartners tr.odd").click(function(){
          $(this).next("tr").toggle();
          $(this).find(".arrow").toggleClass("up");
      });

That code works fine for toggling a row on a table, however, it breaks when I have nested tables in the table:

<table id="tablePartners">
    <thead>
        <tr>

            <th>Name</th>
            <th>Description</th>
            <th>Address</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><a href="#">Partner Name</a></td>
        <td>Random description</td>
        <td>1 Random Street</td>
        <td><div class="arrow"></div></td>
    </tr>
       <tr>
            <td colspan="4">
               <table>
                    <tr>
                        <td><b>Phone</b></td>
                        <td>0123456789</td>
                    </tr>
                    <tr>
                        <td><b>Contact Name</b></td>
                        <td>Jamie</td>
                    </tr>
               </table>

            </td>
        </tr>
    </tbody>
</table>

I've tried doing this to apply the events only to the parent and not nested tables (as suggested in the other question thread), but it didn't work:

  $("#tablePartners>tbody>tr:odd").addClass("odd");
  $("#tablePartners>tbody>tr:even").hide();
  $("#tablePartners>tbody>tr:first-child").show();

  $("#tablePartners>tbody>tr.odd").click(function(){
      $(this).next("tr").toggle();
      $(this).find(".arrow").toggleClass("up");
  });

EDIT: By not working, what I mean is: the toggle event does not work and the odd rows are not hidden. In the first javascript, the toggle worked and the odd rows were hidden but the nest table odd rows were hidden too which I what I don't want.

I think this must be trivial but I've got tunnel vision.

I've put it on jsfiddle: http://jsfiddle.net/9eJ8y/2/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

爱*していゐ 2024-11-16 12:34:53

问题是第一个代码还选择了标题行。使用 tbody 则不会,即您少了一行。您可以切换奇数和偶数来创建相同的效果:

$("#tablePartners > tbody > tr:even").addClass("even");
$("#tablePartners > tbody > tr:odd").hide();
$("#tablePartners > tbody > tr:first-child").show();

$("#tablePartners > tbody > tr.even").click(function(){
  $(this).next("tr").toggle();
  $(this).find(".arrow").toggleClass("up");
});

演示

The problem is that the first code also selects the header row. Using tbody does not, i.e. you have one row less. You could switch odd and even to create the same effect:

$("#tablePartners > tbody > tr:even").addClass("even");
$("#tablePartners > tbody > tr:odd").hide();
$("#tablePartners > tbody > tr:first-child").show();

$("#tablePartners > tbody > tr.even").click(function(){
  $(this).next("tr").toggle();
  $(this).find(".arrow").toggleClass("up");
});

DEMO

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文