javascript - 如何使用 Javascript 在每个表格行的最后一个位置添加详细信息按钮？

Question

我正在从表中的本地获取 JSON 文件，我只想在每行的最后添加按钮。我怎样才能做到这一点？我正在尝试但未能在最后一个位置添加按钮。 2-fedtest.json 是我的本地文件，我读取 JSON 文件并显示表中的所有数据。

Code

function check_user_online() {

    var logged_in_user = {};
    logged_in_user = JSON.parse(localStorage.getItem('current_login_user')); //get data from storage
    // alert(logged_in_user.img);
    if (logged_in_user == undefined) {
        window.location.href = 'login.html';
    } else {
        var profile_image = logged_in_user.image;
        var email = logged_in_user.email;
        // var user_email = logged_in_user.email;
        document.getElementById('dashboard_image').src = profile_image;
        document.getElementById('Username').innerHTML = 'Welcome, ' + email;

        var myInit = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
            mode: 'cors',
            cache: 'default'
        };

        let myRequest = new Request("2-fedtest.json", myInit);

        fetch(myRequest)
            .then(function(resp) {
                return resp.json();
            })
            .then(function(data) {
                console.log(data.listing_data);
                // alert(JSON.stringify(data.listing_data));
                response(data.listing_data);
            })

        function response(e) {
            let table = document.getElementById("transaction_table");
            let row, cell, button;

            for (let i = 0; i < e.length; i++) {
                row = table.insertRow();
                cell = row.insertCell();
                cell.textContent = e[i].request_id;
                cell = row.insertCell();
                cell.textContent = e[i].document_last_name;
                cell = row.insertCell();
                cell.textContent = e[i].email;
                cell = row.insertCell();
                cell.textContent = e[i].document_dob;
                cell = row.insertCell();
                cell.textContent = e[i].used_services_in_request;
                cell = row.insertCell();
                cell.textContent = e[i].country_name;
                cell = row.insertCell();
                cell.textContent = e[i].reference;
                cell = row.insertCell();
                cell.textContent = e[i].created_at;
                cell = row.insertCell();
                cell.textContent = e[i].verification_status;
            }
        }
        return true;
    }
}

Answer 1

我对您正在使用的单元 API 不是 100% 正确，但您应该能够在其中插入 dom 节点:

因此，您可以删除我提到的 if 语句以及之后的内容: cell.textContent = e[i].verification_status;

您可以添加:

cell = row.insertCell(); 
const button = document.createElement("button"); 
button.innerHTML = 'your text'; 
button.onclick = function(e){ /*something to handle events*/} 
cell.innerHTML = button