jQuery Slide Up Table Row

Question

jQuery Slide Up Table Row

Я создаю собственный плагин jQuery, который, помимо прочего, позволяет пользователю удалять записи в таблице в реальном времени. Когда записи удаляются, я бы хотел, чтобы цвет фона удаленной строки таблицы стал красным, а затем исчез из поля зрения.

Вот фрагмент моего кода ниже, который не выполняет ни одной из анимация изменения цвета и не скользит вверх по строке. Однако он удаляет строку, когда заканчивается то, что должно было быть анимацией скольжения вверх. Некоторые вещи, которые следует знать при просмотре приведенного ниже кода:

Переменная "object" - это ссылка jQuery на объект, который был нажат и вызвал операцию удаления.
Объект "object.parent (). Parent ()" это строка, которая удаляется.
CSS-класс «deleteHighlight» содержит цвет, который сделает строку красным.
Метод «addClass» использует метод «addClass» jQueryUI, а не jQuery. Он позволяет использовать анимированный эффект и обратный вызов.

object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

Вот HTML-код, на котором это выполняется, ничего особенного:

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

Не могли бы вы привести пример того, как я могу это исправить?

Спасибо за ваше время .

26

javascript jquery css jquery-ui jquery-animate

задан Oliver Spryn 6 July 2011 в 16:52

1 ответ

Другие вопросы по тегам:

javascript jquery css jquery-ui jquery-animate

Похожие вопросы:

score 0 · Answer 1

Проблема с анимацией строк таблицы состоит в том, что она имеет тип дисплея строки таблицы, и Вы не можете просто изменить ее на display:block, потому что это испортит структуру таблицы. то, что необходимо сделать, является переносом td содержание в отделениях как в ответе GianPero, затем двигайте их, и высота строки автоматически уменьшит с ними. Этот код является более простой версией и будет работать над строками, содержащими th теги, а также td.

var fadeSpeed = 400;
var slideSpeed= 300;
var row = $(this).parent().parent();

row.fadeTo(fadeSpeed, 0.01, () => {
    row.children('td, th')
        .animate({ padding: 0 })
        .wrapInner('<div />')
        .children()
        .slideUp(slideSpeed, () => { row.remove(); });
});

можно изменить fadespeed и slidespeed к любой продолжительности в миллисекундах, или можно установить их на константы jQuery как 'медленный' или 'быстрое'

код анимации строки, вдохновленный Строки таблицы Анимации с jQuery