0

Хочу получить индекс элемента из таблицы и потом манипулировать им. Сам индекс получаю, но блок AJAX его не видит.

    <table border="1" >
        <thead>
           <tr>
              <th>ID R</th><th>ID U</th>
           </tr>
        </thead>
        <tbody id='trash'>
           <tr>
               <td data-label='ID R'>$row[0]</td>
               <td data-label='ID U'>$row[1]</td>
           </tr>
        </tbody>
     </table>

   $("table").on('click', function(event){
        var table = document.querySelectorAll('tr') || [];
        table = [].slice.apply(table);

        event.preventDefault();
        table.forEach(function (element, i) {
            element.addEventListener('click', function () {});

            $.ajax({               
                type: 'POST',
                url:  'regist.php',
                data: {del_elem: i},
                success: function( response ){
                    console.log(i);
                }
            });
        });
    });
4
  • А вам точно tr получать нужно? И что выводит в консоль?
    – LiaVa
    8 апр 2018 в 23:50
  • Упс, не тот код отправил, AJAX надо вытянуть из блока forEach. Да, TR, при нажатии ряд удалить. 8 апр 2018 в 23:56
  • ` trash.removeChild ( this ) ` Вот этот код удаляет ряд, но в AJAX не читает 9 апр 2018 в 0:01
  • Так вы хотите, чтоб ajax читал i за пределами цикла?
    – LiaVa
    9 апр 2018 в 6:08

2 ответа 2

2

Как-то так. Вместо console.log ваш ajax. С помощью $('#trash td').on('click', function(e){}) мы вешаем слушатель события на все элементы td таблицы, при клике берём значение data-атрибута "label" и работаем с ним. И текущий tr удаляем с помощью $(this).parent('tr').remove();

$('#trash td').on('click', function(e) {
  e.preventDefault();
  let id = $(this).data('label');
  console.log(id);
  $(this).parent('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" >
  <thead>
     <tr>
        <th>ID R</th><th>ID U</th>
     </tr>
  </thead>
  <tbody id='trash'>
     <tr>
         <td data-label='ID R'>$row[0]</td>
         <td data-label='ID U'>$row[1]</td>
     </tr>
  </tbody>
</table>

3
  • Спасибо, все работает, но я забыл уточнить, что только при нажатии на ID U или (какой то определенный TD ) можно удалять label, другие игнорируются. 9 апр 2018 в 9:25
  • Можете вешать событие на конкретный td. Если вам помог ответ, отметьте его решением
    – Grulex
    9 апр 2018 в 15:11
  • Ваш ответ помог, потом делаю проверку if (e.target.nodeName != 'IMG') { return false; } else { /***/ } и теперь удаляю только при нажатии на нее 9 апр 2018 в 15:53
0
var WhatWeNeed = $(this).attr('data-label');
1
  • 1
    И как работать с этим? Что это я вполне догадываюсь, но объясните пожалуйста. 8 апр 2018 в 23:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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