Question

我正在尝试创建一个场景，我单击一个表格行，然后该行移动，以便根据单击的行显示内容。

现在我只是想让表格行在切换上顺利移动（或者完全移动开始），但它没有做任何事情。

这是我的代码：

$（document）.ready（function（）{

$('#tableRowID').click(function() {
    $('#tableRowID').animate({
    'marginTop' : "-=30px" 
    });
});});

任何人都可以帮我理解发生了什么吗？

Answer 1

您无法可靠地为表格元素设置动画但是你可以在TD内部设置DIV动画

Answer 2

在<div> *

<td>

提供<td> colspan="NUMBER OF <TD>s IN A <TR>" [<td colspan='3'>]
然后分配div 2类：
1. 一个通常隐藏[.content]
2. 在显示[.on]
使用方法和事件激活显示/隐藏行为[$('.trigger').on("click", ...]
然后在显示div [.toggleClass()]

.toggleClass('on')

演示

$('.trigger').on('click', function() {
  $('.content').toggleClass('on');
});

table {
  border: 1px solid black;
}

td {
  border: 3px solid black;
  min-width: 10ch
}

.trigger {
  cursor: pointer;
  border-color:red;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: .5s ease;
  text-align: center;
}

.content.on {
  max-height: 500px;
  overflow: visible;
  transition: .5s ease;
  text-align: center;
}

<table>
<caption>Click the Red Border</caption>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class='trigger' colspan='3'>
        <div class='content'>CONTENT</div>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

*根据@Roko C. Buljan的回答

使用Jquery移动/滑动表行

2 个答案:

演示