/**
 * Dynamic < td > fill current page
 */
function fillPage() {

    // Determine the number of rows to generate based on the number of records
    for (var i = 0; i != dataArray.length; ++i) {
        // Create a row element
        var row = document.createElement('tr');

        // Create td cell
        var idCell = document.createElement('td');
        var addressCell = document.createElement('td');
        var timeCell = document.createElement('td');
        var amountCell = document.createElement('td');
        var logCell = document.createElement('td');
        var yesterdayCell = document.createElement('td');
        var todayCell = document.createElement('td');
        var flagCell = document.createElement('td');

        // Fill the created td cell with data
        idCell.innerHTML = dataArray[i].id;
        console.log("dataArray.id:" + dataArray[i].id);
        addressCell.innerHTML = dataArray[i].address;
        timeCell.innerHTML = dataArray[i].time;
        amountCell.innerHTML = dataArray[i].amount;
        logCell.innerHTML = dataArray[i].log;
        yesterdayCell.innerHTML = dataArray[i].yesterday;
        todayCell.innerHTML = dataArray[i].today;
        // flag fill settings
        if (dataArray[i].flag == false || dataArray[i].flag == "flase") {
            flagCell.innerHTML = "No need to deal with";
            flagCell.style.color = "gray";
            flagCell.style.border = "#eee 2px outset";
            flagCell.onclick = function() {
                alert("The user has no transfer or processed today");
            }
        } else {
            flagCell.innerHTML = "Untreated";
            flagCell.style.color = "orange";
            flagCell.style.border = "#eee 2px outset";
            flagCell.onclick = function() {
                var r = confirm("Are you sure that the user transferred money today?");
                if (r == true) {
                    // Request background to modify database transfer status
                    // Get the id node of the current record
                    changeState(this.parentNode.childNodes[0].innerHTML);
                    // Modify the front display
                    this.innerHTML = "No need to deal with";
                    this.style.color = "gray";
                }
                
            }
        }   

        // Add a select function [address,time, log,today,yesterday]
        addressCell.onclick = function() {
            alert(this.innerHTML);
        }
        timeCell.onclick = function() {
            alert(this.innerHTML);
        }
        logCell.onclick = function() {
            alert(this.innerHTML);
        }
        yesterdayCell.onclick = function() {
            alert(this.innerHTML);
        }
        todayCell.onclick = function() {
            alert(this.innerHTML);
        }

        // Add the new td to the new tr line
        row.appendChild(idCell);
        row.appendChild(addressCell);
        row.appendChild(timeCell);
        row.appendChild(amountCell);
        row.appendChild(logCell);
        row.appendChild(yesterdayCell);
        row.appendChild(todayCell);
        row.appendChild(flagCell);

        // Add this line to tbody
        // Get tbody
        var tbody = document.getElementById("tbody");
        tbody.appendChild(row);
    }
}

Other dataarrays come from a json sent in the background

{
    "currentPage":1,
    "dataArray":[
         {"address":"","amount":0,"flag":false,"id":1,"log":"","time":"","today":"","yesterday":""},
         {"address":"","amount":0,"flag":false,"id":8888,"log":"","time":"","today":"","yesterday":""},
         {"address":"","amount":0,"flag":false,"id":8889,"log":"","time":"","today":"","yesterday":""},
         {"address":"","amount":0,"flag":false,"id":8890,"log":"","time":"","today":"","yesterday":""}
    ],
    "firstPage":1,
    "nextPage":1,
    "pageSize":5,
    "prePage":1,
    "totalCount":4,
    "totalPage":1
}

 

Attention / idea:

function fillPage() {
    ....
    ....
    ....
    // Fill the created td cell with data
    idCell.innerHTML = dataArray[i].id;

    .....
    .....
    flagCell.onclick = function() {
        var r = confirm("Are you sure the user has transferred money today?");
        if (r == true) {
            // Request background to modify database transfer status
            // Get the id node of the current record
            changeState(this.parentNode.childNodes[0].innerHTML);
            // Modify the front display
            this.innerHTML = "No need to deal with";
            this.style.color = "gray";
        }
                
    }
}

this.parentNode.childNodes[0].innerHTML is idCell.innerHTML,

idCell.innerHTML = dataArray[i].id,

But you can't use dataArray[i].id to make undefined mistakes

index.js:xxx Uncaught TypeError: Cannot read property 'xx' of undefined

It means that the function created in the function cannot call external variables, even the external global variables.

 

I can't use idCell.innerHTML because I have multiple records. The first td created under the for loop is called idCell

Because js is a parsing language, after a for is written, if the idCell is not running, it also refers to the last record.

 

Correct writing method: use this to indicate the object, element and Node that calls it.
flagCell.onclick = function() {
      ...
     changeState(this.parentNode.childNodes[0].innerHTML);
/ / modify the front-end display
"'this.innerHTML =" no processing required ";
     this.style.color = "gray";
}

this here represents the < td > node of flagCell, because it is the internal part of the call of flagCell.

Use this to specify a node. Even if many nodes are named, they can be separated

this.parentNode.childNodes[0] gets the set of child nodes of the parent node (a < tr >) of flagCell (< td > created under < tr >, such as: flagCell, idCell)

The subscript starts from 0. The first one created is idCell, so the idCell node is obtained.
                

// Add a select function [address,time, log,today,yesterday]
        addressCell.onclick = function() {
            alert(this.innerHTML);
        }
        timeCell.onclick = function() {
            alert(this.innerHTML);
        }
        logCell.onclick = function() {
            alert(this.innerHTML);
        }
        yesterdayCell.onclick = function() {
            alert(this.innerHTML);
        }
        todayCell.onclick = function() {
            alert(this.innerHTML);
        }

These are the same. You can't change it to addressCell.innerHTML, so if it is for loop with multiple duplicate names, it will only work for the last one, so use this