Почему кнопка внутри таблицы не получает значение td при нажатии?

Question

Я заполнил таблицу, фактически таблицу данных jquery. Я создал кнопку, добавив ее к td , выполнив цикл. Кнопка вызывает showmsg () функцию успешно, но не может получить значение из конкретной td строки, в которой она находится.

Там написано undefined .

Код:

Функция, которая заполняет таблицу и создает внутри нее кнопку EDIT.

 function fillServicesGrid()
        {

            var url = '@Url.Action("GetServices")';
            var data = ''

            $.get(url, data, function (response) {

                $("#tblServices").html("");

                $.each(response, function (i, val) {
                    $("#tblServices").append($('<tr>').append($('<td id="tdServiceID">').html(val.ServiceID)).append($('<td>').html(val.ServiceName)).append($('<td>').html(val.ServicePrice)).append($('<button type="button" class="btn btn-primary btnEdit" onclick="showmsg();">Edit</button>')));
                });

            });

            $('#tblServices').DataTable();

            $('.sorting_asc, .sorting').addClass('datatable-headerrow');
            $('.paginate_button.current').addClass('pagination-buttons');
            $('.dataTables_filter, .dataTables_length').hide();

        }

функция, вызываемая btnEdit для получения текста td # tdService

function showmsg()
{
    var serviceID = $(this).closest('tr').find('#tdServiceID').text();
    alert(serviceID);



    $("#ServiceName").val("Tester");
    $("#ServicePrice").val("Testing");
}

Answer 1

Поскольку вы используете идентификаторы для элементов HTML, они должны быть уникальными. Попробуйте выполнить следующее в вашей функции each:

 $("#tblServices").append($('<tr>').append($('<td>').attr('id',"tdServiceID" + i).html(val.ServiceID)).append($('<td>').html(val.ServiceName)).append($('<td>').html(val.ServicePrice)).append($('<button type="button" class="btn btn-primary btnEdit" onclick="showmsg(\'' + i + '\');">Edit</button>')));

(установка идентификатора равным tdServiceID с добавлением индекса итерации) Обратите внимание, что мы передаем 'i' в функции showmsg, которая теперь может стать

function showmsg(i)
{
    var serviceID = $('#tdServiceID'+i).text();
    alert(serviceID);

    $("#ServiceName").val("Tester");
    $("#ServicePrice").val("Testing");
}

Вроде работает jsFiddle

Не уверен, что должны делать последние две строки в этом методе