Js动态给表格节点tbody添加<td>数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenbetter1996/article/details/83049864

/**
 * 动态<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