0

Есть таблица, у каждой строки которой есть порядковый номер, этот номер нужно обновлять при удалении любого элемента:

Таблица

<table id="orders"> //<th> и остальные теги не вывожу
  <tr rel="<?=$orderId;?>">/* $orderId НЕ порядковый номер строки */
       <td><span class="counter">$i++</span></td>
  /* $i - выводит порядковый номер строки, который после 
  изменяется с помощью jquery function updateCounter() */
       <td class="delete">удалить</td>
  </tr>
  <tr>...</tr>
  <tr>...</tr>
  ...
</table>

Удаляю ряд с помощью jquery:

$(".delete").on('click', function () {
    var tr = $(this).closest('tr');
    deleteOrder(tr);
});

function deleteOrder(tr) {
    var id = tr.attr('rel');
    $.post (
        '/blog/admin/ajax/deleteOrder.php',
        {"id" : id},
        function( data ){
            tr.fadeOut();
        });
    updateCounter();
}

function updateCounter() {
    var tr = $('#orders tr');
    var i = 0;
    $.each(tr, function () {
        i++;
        $(this).find('.counter').text(i);
    });
}

Вся проблема в функции updateCounter(). При удалении строки функция не заменяет порядковый номер на новый, но если вставить другое значение, например:

$(this).find('.counter').text(value);  

То все порядковые номера заменятся на value, будь это строка или что либо еще.

Прошу подсказать куда копать?

Проблема в селекторе? Возможно, выделяются все строки с классом counter и в них кладется одно и то же число, именно поэтому нет смысла в моем обновлении и

text(i);  ??
1

1 ответ 1

2

Потому что fadeOut не удаляет tr, а выкручивает ему opacity в 0. После fadeOut вам надо еще удалить саму строку, и тогда счетчик должен нормально заработать.

4
  • Ну либо воспользоваться каким-нибудь :visible в селекторе строк
    – Grundy
    Commented 19 июл. 2017 в 8:59
  • Еще надо вызов updateCounter() поместить в функцию обратного вызова $.post()
    – Dmitry
    Commented 19 июл. 2017 в 9:14
  • @Dmitry, зачем именно в функцию обратного вызова?
    – wiaim
    Commented 19 июл. 2017 в 10:18
  • @Darth, после fadeOut добавил tr.remove(), и поменял строки text(i) и i++ местами, все заработало, спасибо большое! Но я так и не понимаю почему.
    – wiaim
    Commented 19 июл. 2017 в 10:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.