/**
 * 動態<td>填充當前頁
 */
function fillPage() {

    // 根據記錄數確定要生成的行數
    for (var i = 0; i != dataArray.length; ++i) {
        // 建立一個行元素
        var row = document.createElement('tr');

        // 建立td單元格
        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');

        // 給建立的td單元格填充資料
        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填充設定
        if (dataArray[i].flag == false || dataArray[i].flag == "flase") {
            flagCell.innerHTML = "無需處理";
            flagCell.style.color = "gray";
            flagCell.style.border = "#eee 2px outset";
            flagCell.onclick = function() {
                alert("該使用者今天無轉賬或已處理");
            }
        } else {
            flagCell.innerHTML = "未處理";
            flagCell.style.color = "orange";
            flagCell.style.border = "#eee 2px outset";
            flagCell.onclick = function() {
                var r = confirm("確認處理完該使用者今天轉賬了？");
                if (r == true) {
                    // 請求後臺修改資料庫轉賬狀態
                    // 獲取當前這行記錄的id節點
                    changeState(this.parentNode.childNodes[0].innerHTML);
                    // 修改前端顯示
                    this.innerHTML = "無需處理";
                    this.style.color = "gray";
                }
                
            }
        }   

        // 新增點選函式[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);
        }

        // 將新建的td加入新建的tr行
        row.appendChild(idCell);
        row.appendChild(addressCell);
        row.appendChild(timeCell);
        row.appendChild(amountCell);
        row.appendChild(logCell);
        row.appendChild(yesterdayCell);
        row.appendChild(todayCell);
        row.appendChild(flagCell);

        // 將這行加到tbody
        // 獲取tbody
        var tbody = document.getElementById("tbody");
        tbody.appendChild(row);
    }
}
 

其他dataArray是來自於後臺發的一個json中

{
    "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
}
 

注重/意點:

function fillPage() {
    ....
    ....
    ....
    // 給建立的td單元格填充資料
    idCell.innerHTML = dataArray[i].id;

    .....
    .....
    flagCell.onclick = function() {
        var r = confirm("確認處理完該使用者今天轉賬了？");
        if (r == true) {
            // 請求後臺修改資料庫轉賬狀態
            // 獲取當前這行記錄的id節點
            changeState(this.parentNode.childNodes[0].innerHTML);
            // 修改前端顯示
            this.innerHTML = "無需處理";
            this.style.color = "gray";
        }
                
    }
}
 

this.parentNode.childNodes[0].innerHTML就是idCell.innerHTML,

也是上面的idCell.innerHTML = dataArray[i].id;這句,

但是這裡不能用 dataArray[i].id會爆未定義的錯

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

就是函式裡面建立的函式不能呼叫外面的變數,儘管是外面的全域性變數。

也不能用 idCell.innerHTML 因為我這有多條記錄,for迴圈下每個新建的第一個td都是叫 idCell

因為js是解析語言,所以一個for後,這樣寫沒執行這個idCell也是指到了最後一條記錄的那個。

正確寫法: 採用this, this表示呼叫它的物件、元素、節點Node。
flagCell.onclick = function() {
      ...
     changeState(this.parentNode.childNodes[0].innerHTML);
     // 修改前端顯示
     this.innerHTML = "無需處理";
     this.style.color = "gray";
}

這裡的this表示flagCell這個<td>節點，因為是flagCell這個節點呼叫的內部。

使用this就指定了某個節點，就算很多節點命名一樣，也是可以分開的

this.parentNode.childNodes[0] 獲取flagCell的父親節點（一個<tr>)的子節點集合(<tr>下建立的那些<td>如：flagCell, idCell)

下標從 0 開始，第一個建立的是idCell所以就獲取到了idCell節點。

// 新增點選函式[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);
        }

這些也一樣，不能改為addressCell.innerHTML，這樣如果是for迴圈多個重名的話，會只對最後一個有效，故使用this