使单元格中的文本成为按钮 javascript

Question

is there anyway to make this extra td a button so that every "show" is clickable?

$(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>';
                  });

I'm worried that I messed up by adding that extra column alongside the others being created with json data, but I'm not sure how else to add a button for every row.

Answer 1

I'm not sure I understand your question. But here is an example for you that prints row numbers when clicked '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>');


})});

If you want to use button instead of 'show' you can replace a tag with button.

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