Как настроить JavaScript для обработки данных по каждой строке таблицы, а не только по первой строке? 

Здравствуйте! <br/> Я новичок и нуждаюсь в вашей помощи. <br/> <br/> У меня есть два файла: index.php и function.php. <br/> <br/> В файле index.php расположена таблица заявок, и у каждой заявки есть кнопка для удаления (изменения статуса). При нажатии на кнопку должна выполняться отправка данных в файл function.php без перезагрузки страницы, а также производиться изменение соответствующего блока. <br/> <br/> У меня возник вопрос: почему работает только первая кнопка удаления в верхней строке таблицы, а кнопки во второй, третьей и последующих строках не функционируют? <br/> <br/> <b>Файл index.php</b> <br/> <pre><code class="javascript">&lt;script type="text/javascript"&gt;
$(document).ready(function(){

	$('.stat_del').click(function(){
		if($(this).val()!=''){
			$.post('http://site.ru/function.php', {
				'fin_plus': 30,
				'stat_del': $(this).val(),
			},
			function(data){ $('#fin_info').html(data); });
		}
	});
			
});
&lt;/script&gt;</code></pre> <br/> <br/> <pre><code class="html">&lt;div id="fin_info"&gt;
&lt;table&gt;
&lt;tr&gt;&lt;th&gt;Дата&lt;/th&gt;&lt;th&gt;Заявка&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="date"&gt;'11.05.1985&lt;/td&gt;&lt;td&gt;Заявка №1&lt;/td&gt;&lt;td&gt;&lt;button class="stat_del btn" value="1"&gt;удалить&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="date"&gt;'12.05.1985&lt;/td&gt;&lt;td&gt;Заявка №2&lt;/td&gt;&lt;td&gt;&lt;button class="stat_del btn" value="2"&gt;удалить&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="date"&gt;'13.05.1985&lt;/td&gt;&lt;td&gt;Заявка №3&lt;/td&gt;&lt;td&gt;&lt;button class="stat_del btn" value="3"&gt;удалить&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;</code></pre> <br/> <br/> <b>Файл function.php</b> <br/>
  • 11 октября 2024 г. 8:25
Ответы на вопрос 2 
Похоже, что ваша проблема не в JavaScript-коде, а скорее в том, как вы используете кнопки для удаления в таблице. На первый взгляд, JavaScript работает правильно, и вы правильно используете jQuery для обработки кликов по кнопкам. 

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

### Возможные решения:

1. **Проверьте наличие конфликта с другими скриптами**. Возможно, у вас на странице подключен другой скрипт, который перезаписывает событие клика.

2. **Убедитесь, что jQuery загружен правильно**. Проверьте консоль браузера на наличие ошибок и убедитесь, что библиотека jQuery загружается перед вашим JavaScript-кодом.

3. **Используйте делегирование событий**. Вместо того чтобы добавлять обработчики событий к каждой кнопке, вы можете использовать делегирование событий. Это позволит вам легче управлять динамически добавленными элементами. Попробуйте изменить код следующим образом:

```javascript
<script type="text/javascript">
$(document).ready(function(){
    $('#fin_info').on('click', '.stat_del', function(){
        if($(this).val() != ''){
            $.post('http://site.ru/function.php', {
                'fin_plus': 30,
                'stat_del': $(this).val(),
            },
            function(data){
                $('#fin_info').html(data);
            });
        }
    });
});
</script>
```

Здесь мы используем `$('#fin_info').on('click', '.stat_del', function() {...})`, что позволяет обрабатывать нажатия на кнопки `stat_del` независимо от того, будут ли они добавлены позже или уже существующие при загрузке страницы.

4. **Проверьте значение кнопки**. Убедитесь, что значение (`value`) каждой кнопки установлено корректно и соответствует ожидаемому ID заявки. Если значения не уникальны или их нет, это может привести к неправильному поведению.

### Завершение:

Попробуйте внедрить предложенные изменения и протестировать функциональность. Если у вас возникают дополнительные проблемы или ошибки, можете делиться ими, и я постараюсь помочь вам дальше.
Идентификатор должен быть уникальным, на то он и идентификатор. У вас же все кнопки "зовутся" одинаково, поэтому и обработчик навешивается только на первую попавшуюся. 
 Замените id на class, адаптируйте код обработчика под работу с объектом, на котором произошло событие (в jQuery это будет $(this)), а не хардкодными элементами DOM и всё заработает как надо.
Похожие вопросы
    Показать ещё