Создание текста в ячейке кнопкой javascript

Question

есть ли способ сделать этот дополнительный тд кнопкой для того, чтобы каждое "шоу" было кликабельным?

$(document).ready(function(){
                $.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data){
                  var custData = '';
                  $.each(data, function(key, value){
                    custData += '<tr>';
                    custData += '<td>' +value.name+'</td>';
                    custData += '<td>' +value.address+'</td>';
                    custData += '<td>' +value.cityStateZip+'</td>';
                    custData += '<td>' +value.latLang+'</td>';
                    custData += '<td>' +(value.image || "No image available")+'</td>';
                    custData += '<td>' +"show"+ '</td>'; // this is what I need a button
                    custData += '</tr>';
                  });

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

Answer 1

Я не уверен, что понимаю ваш вопрос. Но вот вам пример, который печатает номера строк при нажатии «show».

function printRowNumber(row) {
alert('Row:' + row);
return false;
}

$(document).ready(function() {
const appDiv = document.getElementById('app');
$.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data) {
    var custData = '';
    $.each(data, function(key, value) {
        custData += '<tr>';
        custData += '<td>' + value.name + '</td>';
        custData += '<td>' + value.address + '</td>';
        custData += '<td>' + value.cityStateZip + '</td>';
        custData += '<td>' + value.latLang + '</td>';
        custData += '<td>' + (value.image || "No image available") + '</td>';
        custData += '<td>' + '<a href="javascript:void" onClick=printRowNumber(' + key + ')>show</a>' + '</td>'; // this is what I need a button
        custData += '</tr>';

    });
    appDiv.insertAdjacentHTML('beforeend', '<table>' + custData + '</table>');


})});

Если вы хотите использовать кнопку вместо «show», вы можете заменить тег кнопкой.

    custData += '<td>' +'<button onClick=printRowNumber('+key+')>show</button>'+ '</td>';