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 that you have read and understand our privacy policy and code of conduct.

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