如何使用滑动(或显示)函数在一个表行?

我试图添加一行到一个表，并有一行滑进视图，但滑动功能似乎是添加一个显示:块样式的表行，这打乱了布局。

有什么解决办法吗?

代码如下:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

当前回答

我对所有其他的解决方案都有问题，但最后还是做了这个简单的事情，非常顺利。

像这样设置你的HTML:

<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>

然后像这样设置你的javascript:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

基本上，让“隐形”行高0px，里面有一个div。使用div(不是行)上的动画，然后设置行高为1px。

为了再次隐藏行，在div上使用相反的动画，并将行高设置为0px。

2013-08-31 19:59:26

其他回答

有一个表行嵌套表:

<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>

向下滑动行:

$('.dummyRow').show().find("table").slideDown();

注意:行和它的内容(这里是“table”)都应该在动画开始之前被隐藏。

上滑行:

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

第二个参数(function())是一个回调。

简单! !

请注意，还有几个选项可以添加为滑动上/下函数的参数(最常见的是“慢”和“快”的持续时间)。

2010-07-15 06:22:37

我回答这个问题有点落后了，但我找到了一种方法来做到这一点:)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

我只是在表格数据标记中放了一个div元素。当它被设置为可见时，随着div展开，整行就会下降。然后告诉它渐隐(然后超时，以便您看到效果)，然后再次隐藏表行:)

希望这能帮助到一些人!

2010-02-28 16:23:50

我简单地动态包装tr，然后删除它一旦slideUp/slideDown已经完成。这是一个非常小的开销添加和删除一个或两个标签，然后删除它们一旦动画完成，我没有看到任何可见的延迟。

SlideUp:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){
  
  $(this).parent().parent().remove();
    
 });

SlideDown:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){
  
  var $set = $(this);
  $set.replaceWith($set.contents());
    
 });

我不得不向fletchzone.com致敬，因为我拿走了他的插件，并将其剥离到上面。

2010-08-05 00:39:16

我喜欢Vinny写的插件，并一直在使用。但是对于在滑动行(tr/td)内的表，即使在滑动后，嵌套表的行始终是隐藏的。所以我做了一个快速和简单的hack在插件不隐藏行嵌套表。只要改一下下面这行