Создание разделов таблицы html с использованием jQuery

Question

У меня есть таблица HTML, которая динамически заполняется данными, полученными с сервера. Поскольку я не знаю схемы или количества строк перед рукой, у меня есть ее и ее позиция ячейки &, определяемая как относительная. Теперь, когда таблица заполнена, я хочу удалить из нее ряд строк (заданных массивом индексов строк). Я пытаюсь использовать следующую анимацию для этих удалений строк. Строки, которые должны быть удалены, исчезают, оставляя пустое место в таблице .-> Другие строки скользят вверх, чтобы заполнить пространство, созданное между ними.

Я пробовал следующие вещи:

1. Просто выведение или скользя строку будет удалено с помощью JQuery. Проблема с этим заключается в том, что анимация отрывистая, и все, что я вижу, это пучок строк, исчезающих сразу.

2. Установка «позиции» всех остальных строк, кроме тех, которые должны быть удалены как фиксированные, затухание строк, которые нужно удалить, а затем скользящие вверх строки, которые были исправлены. Проблема в том, что - поскольку строки были размещены относительно друг друга, как только я их исправил, все они теряют все свои предыдущие стили, сокращают и теряют четко определенную структуру и переписывают друг друга. Что было бы лучшим способом реализовать требуемый вид анимации?

Кроме того, как можно было бы указать набор строк (заданных списком индексов) для селектора jQuery. Прямо сейчас я создаю селектор tr: nth-of-type (i) для каждого элемента списка и объединяю их в большую строку, разделенную ',', и используя это как селектор для всех строк. Есть лучший способ сделать это?

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 для диагностики), чтобы увидеть, как это будет/может работать

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>