jQuery SlideToggle() 带有嵌套表的表行

发布于 12-10 03:33 字数 1972 浏览 1 评论 0原文

我目前在带有嵌套表的表行上使用 SlideToggle() jQuery 效果时遇到问题。

我有以下 HTML 标记:

<table>
  <tbody>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

我想立即隐藏详细信息行并使用 slipToggle() 函数显示它。我有以下 jQuery 代码:

$(function() {
  $(".details").hide();
  $('.show-details').click(function(e){
    $(this).next(".details").slideToggle(500);
    $("td > span", this).toggleClass('open')
  });
});

问题是该行来自 display:none;显示:表格行;这会导致 display:none;display:block;display:table-row;。然后效果跳转到显示块,然后对行的高度进行动画处理(+ 使其溢出大量,因此下一行会向下跳几秒),最后变成 display:table-row;< /code> 当动画结束时。

有什么建议可以使用简单的 SlideToggle 来显示 .detail 行吗?

我已经尝试过这个中的答案问题没有任何运气。

I currently have a problem with the slideToggle() jQuery effect on a table row with a nested table.

I have the following HTML markup:

<table>
  <tbody>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

I want to hide the detail row right away and show it with the slideToggle() function. I have the following jQuery code:

$(function() {
  $(".details").hide();
  $('.show-details').click(function(e){
    $(this).next(".details").slideToggle(500);
    $("td > span", this).toggleClass('open')
  });
});

The problem is that the row goes from display:none; to display:table-row; which results in a display:none; to display:block; to display:table-row;. The effect then jumps to display block, then animates the height of the row (+ overflow it by a ton, so the next row jumps down for a few secs) and then at last turn into display:table-row; when the animation is over.

Any suggestions to get the effect working with a simple slideToggle to display the .detail row?

I've tried the answers in this question without any luck.

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

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

发布评论

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

评论(4

难以启齿的温柔2024-12-17 03:33:55

我认为这是表细胞固有的功能障碍。解决方案是将它们替换为样式化的 DIV:

<style type="text/css">
.cell {
    display: inline-block;
    border: 1px solid;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 50px;
}
.details .cell {
    width: 75px;
}
</style>


<div class="head">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
</div>
<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>
</div>    

<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>

</div>

http://jsfiddle.net/mblase75/mv7Y5/1/

I think this is an inherent dysfunction with table cells. The solution is to replace them with styled DIVs:

<style type="text/css">
.cell {
    display: inline-block;
    border: 1px solid;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 50px;
}
.details .cell {
    width: 75px;
}
</style>


<div class="head">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
</div>
<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>
</div>    

<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>

</div>

http://jsfiddle.net/mblase75/mv7Y5/1/

疧_╮線2024-12-17 03:33:55

实际上有一种方法可以通过嵌套表获得相同的效果 - 你一开始就走在正确的轨道上,但你的 jQuery 是错误的。借助 Gravity 的 jQuery,我能够简单地将类分配给相应的表行,并且一切都工作得很好。

HTML

<table>
            <thead>
              <tr>
                <th>Month</th>
                <th>From Date</th>
                <th>To Date</th>
                <th>Execution Date</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
         <tr class="row show-details odd">
                <td>4-APR</td>
                <td>TExt</td>
                <td> </td>
                <td>05/06/2011</td>
                <td>Done</td>
             </tr>
<tr class="row details">
    <td colspan="5">
<table>
        <thead>
         <tr>
          <th>File Name</th>
          <th>Date Created</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
                  <td>Aetna XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="even">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="odd">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
     </tbody>
</table>

CSS

.cell {
    display: inline-block;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 100%;
}
.details .cell {
    width: 100%;
}

jQuery

<script>   
$(function() {
    $(".details").hide();
    $('.show-details').click(function(e) {
        $(this).next(".details").fadeToggle(500);
//      $("td > span", this).toggleClass('open')
    });
});
</script>

这样,我就不必重做所有 CSS、表格结构,甚至根本不需要修改我的表格。我刚刚将课程分配给 TR,瞧!

There is actually a way to get the same affect with nested tables - you were on the right track to begin with but your jQuery was wrong. WIth Gravity's jQuery, I was able to simply assign the classes to the respective table row and it all works beautifully.

HTML

<table>
            <thead>
              <tr>
                <th>Month</th>
                <th>From Date</th>
                <th>To Date</th>
                <th>Execution Date</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
         <tr class="row show-details odd">
                <td>4-APR</td>
                <td>TExt</td>
                <td> </td>
                <td>05/06/2011</td>
                <td>Done</td>
             </tr>
<tr class="row details">
    <td colspan="5">
<table>
        <thead>
         <tr>
          <th>File Name</th>
          <th>Date Created</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
                  <td>Aetna XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="even">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="odd">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
     </tbody>
</table>

CSS

.cell {
    display: inline-block;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 100%;
}
.details .cell {
    width: 100%;
}

jQuery

<script>   
$(function() {
    $(".details").hide();
    $('.show-details').click(function(e) {
        $(this).next(".details").fadeToggle(500);
//      $("td > span", this).toggleClass('open')
    });
});
</script>

This way, I didn't have to redo all my CSS, table structure or even touch my tables at all. I just assigned the classes to the TR and voila!

一曲爱恨情仇2024-12-17 03:33:55

真正尝试使用 styled divs 答案。否则,我可以使用 fadeToggle(500) 获得更好的跨浏览器一致性,以便在 IE 中隐藏和显示表行。同样,您仍然需要确认 fadeToggle 的行为是可以接受的。

$(function() {
//seriously consider styling these as display:hidden on load
  $(".details").hide(); 
  $('.show-details').click(function(e){
    $(this).next(".details").fadeToggle(500);
    $("td > span", this).toggleClass('open')
  });
});

really try to use the styled divs answer. Otherwise, I have had better cross browser consistency with fadeToggle(500) for hiding and displaying table rows across IE. Again, you'll still need to confirm fadeToggle's behavior is acceptable.

$(function() {
//seriously consider styling these as display:hidden on load
  $(".details").hide(); 
  $('.show-details').click(function(e){
    $(this).next(".details").fadeToggle(500);
    $("td > span", this).toggleClass('open')
  });
});
月亮邮递员2024-12-17 03:33:55

如果你确实想使用 TR,因为你不想重写它,请添加此 css,这样当它切换时,它会转到“block”而不是“table-row”

tr{
     display:block
};

If you really want to use TRs because you dont want to rewrite it, add this css, so that when it toggles it goes to "block" instead of "table-row"

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