JAVASCRIPT/Jquery получить значение первой строки

Question

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

Таблица заполняется из базы данных SQL ...

изображение ниже!

вложу только необходимый код:

HTML Button:

<button type="button" class="btn btn-danger btn_delete" id="btn_delete" onclick="delete_function()">Delete</button> 

Javascript Код:

<script type="text/javascript"> 
    function delete_function() { 
     var id = $('#clients tbody').find('td:first').text(); 
     alert(id);  
    } 
</script> 

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

Как я могу получить то же значение номера id, которое существует в одной строке нажатой кнопки ??? Я принимаю Javascript и Jquery советы

Answer 1

Изменить код:

<button type="button" class="btn btn-danger btn_delete" id="btn_delete" onclick="delete_function(this)">Delete</button> 

Использование first-child

<script type="text/javascript"> 
    function delete_function(obj) { 
     var id = $(obj).closest('tr').find('td:first-child').text(); 
     alert(id);  
    } 
</script> 

Одна вещь, говоря: вы не должны использовать OnClick в HTML:

$(".btn_delete").on('click',function(){ 
    var id = $(this).closest('tr').find('td:first-child').text(); 
    alert(id); 

}); 

Answer 2

$('.btn_delete').click(function(){ 
    var id = $(this).parents('tr').find('td:first-child').text(); 
    alert(id); 
} 

onClick - это всегда плохая идея.

jQuery.click() vs onClick

Why is using onClick() in HTML a bad practice?

Answer 3

Там же много способов, вы можете идти об этом, но один из способов было бы установить id непосредственно на самой кнопке, так что вы не должны пересекать DOM, чтобы получить Это.

<button class="delete" data-id="114">Delete</button> 

Тогда в вашем JavaScript

$('button.delete').on('click', function(e) { 
    console.log($(this).data('id')); 
}); 

Answer 4

Вы всегда получите тот же результат, потому что вы всегда получаете тот же элемент. Чтобы получить значение, связанное с нажатой кнопкой, вам нужно включить кнопку, когда вы найдете элемент.

Поскольку вы используете jQuery, вы можете использовать его и для привязки событий. Удалить атрибут onclick из HTML

<button type="button" class="btn btn-danger btn_delete" id="btn_delete">Delete</button> 

В обработчик событий с помощью кнопки, которая была нажата (this), чтобы найти первую ячейку в той же строке:

$(document).ready(function(){ 

    $('#clients .btn_delete').click(function() { 
    var id = $(this).closest('tr').find('td:first').text(); 
    alert(id);  
    } 

});