使用jQuery修复html表格的部分

Making sections of an html table fixed using jQuery

本文关键字：表格 html jQuery 修复 使用      更新时间：2023-09-26

我有一个HTML表，它是从服务器获取的数据动态填充的。因为我不知道之前的模式或行数，我知道它，它的行是&细胞的位置被定义为相对的。现在，一旦填充了表，我想要从表中删除一组行(由行索引数组指定)。我正在为这些行删除尝试以下动画。应该被删除的行逐渐消失，在表中留下空白空间。->其他行向上滑动以填充它们之间创建的空间。

我尝试了以下方法:

  1. 使用jquery简单地淡出或滑动要删除的行。这样做的问题是，动画很不稳定，我所能看到的只是一堆行同时消失。

  2. 将除要删除的行外的所有其他行的"位置"设置为固定，将要删除的行淡出，然后将固定的行向上滑动。这样做的问题是-由于行是相对放置的，一旦我将它们固定，它们就会失去所有以前的样式，收缩，并失去定义良好的结构并相互覆盖。实现所需动画的最佳方式是什么?

另外，如何为jQuery选择器指定一堆行(由索引列表指定)呢?现在，我正在为列表的每个元素创建tr:第n类型(I)选择器，并将它们连接在一个用'，'分隔的大字符串中，并将其用作所有行的选择器。有更好的方法吗?

jsBin演示

不要给表格元素添加动画。。
相反，在行单元格中动画化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>

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

这里有一个示例(仅用于测试的css)来看看它是如何工作的

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 */
}
<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>

相关文章：