时间戳

首页 > 解决方案 > 使单元格中的文本成为按钮 javascript

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

问题描述

有没有办法让这个额外的 td 成为一个按钮，以便每个“节目”都是可点击的？

$(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 数据创建的其他列旁边添加了额外的列，但我不确定如何为每一行添加一个按钮。

标签： javascriptbutton

解决方案

我不确定我是否理解你的问题。但这里有一个示例，当您单击“显示”时会打印行号。

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>');


})});

如果你想使用按钮而不是“显示”，你可以用按钮替换标签。

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

推荐阅读