欢迎来到知了堂!
知了堂-电话号码 028-87058185

分享JavaScript动态给表格节点tbody添加数据-知了堂

分享JavaScript动态给表格节点tbody添加数据

/**
 * 动态<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也是指到了最后一条记录的那个。

分享Js动态给表格节点tbody添加数据

 

  正确写法: 采用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>下创建的那些<tr>如: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

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用