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