使用jQuery

Question

我有一个HTML表，它是从服务器提取的数据中动态填充的。由于我事先并不了解架构或行数，因此我有它的行，它的行和＆amp;单元格的位置定义为相对的。 现在填充表后，我想从中删除一组行（由行索引数组指定）。我正在为这些行删除尝试以下动画。 应该删除的行淡出表格中的空白区域.-＆gt;其他行向上滑动以填充它们之间创建的空间。

我试过以下事情：

1. 使用jquery简单地淡出或向上滑动要删除的行。 这个问题是，动画是生涩的，我只能看到一堆行一下子消失。

2. 设置＆＃39;位置＆＃39;除了要删除的行之外的所有其他行，淡出要删除的行，然后向上滑动已修复的行。 这个问题是 - 由于行是相对放置的，一旦我修复了它们，它们都会丢失所有以前的样式，收缩，并失去明确定义的结构并相互覆盖。 实现所需类型动画的最佳方法是什么？

此外，如何为jQuery选择器指定一堆行（由索引列表指定）。现在我正在为列表的每个元素创建tr：nth-​​of-type（i）选择器，并将它们连接在一个由＆＃39;，＆＃39;分隔的大字符串中，并使用它作为选择器所有的行。有更好的方法吗？

Answer 1

<强> jsBin demo

不要为表格元素设置动画。永远。
而是在行单元格内为DIV元素设置动画。一旦它们淡出并动画到高度0，您就可以自由移除父TR

示例：

$("button").on("click", function(){
  
  // Table with no DIV elements (Animate ROWS)
  $("#noDivs tr:eq(1)").animate({opacity:0}, 800, function(){
     $(this).slideUp();
  });
  
  // Table with DIVs (Animate DIV)
  $("#divs tr:eq(1) div").animate({opacity:0}, 800, function(){
     $(this).slideUp();
  });
  
});

table{
  border-collapse: separate;
  border-spacing: 0px;
}
table td{
  padding:0; margin:0;
}

table#noDivs td,
table#divs div{
  border:1px solid #ddd;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Delete rows 2</button>
<br><br>


Animate DIV instead:

<table id="divs">
  <tr>
    <td><div>Cell 1</div></td>
    <td><div>Cell 2</div></td>
    <td><div>Cell 3</div></td>
    <td><div>Cell 4</div></td>
  </tr>
  <tr>
    <td><div>Cell 1</div></td>
    <td><div>Cell 2</div></td>
    <td><div>Cell 3</div></td>
    <td><div>Cell 4</div></td>
  </tr>
  <tr>
    <td><div>Cell 1</div></td>
    <td><div>Cell 2</div></td>
    <td><div>Cell 3</div></td>
    <td><div>Cell 4</div></td>
  </tr>
  <tr>
    <td><div>Cell 1</div></td>
    <td><div>Cell 2</div></td>
    <td><div>Cell 3</div></td>
    <td><div>Cell 4</div></td>
  </tr>
</table>


Animate TR (Issue)

<table id="noDivs">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Answer 2

你应该添加/删除一个类并使用CSS来制作动画。

这里有一个例子（仅用于测试的css），看看它将如何工作

＆＃13;

＆＃13;

table {
  width:600px;
  border:solid;
}
td {
  border:solid;
}
/* demo purpose , instead js */
td {
  pointer-events:none;
  font-size:1.2em;
  opacity:1;
}
tr:focus td {
  font-size:0;
  border:solid 0 transparent;
  opacity:0;
  transition:1s;/*with steps or css animation is fine too */
}

＆＃13;

<table>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
  <tr tabindex="0">
    <td>hide</td>
    <td>my</td>
    <td>row</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;