1.ajax获取List数据
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
let returnVal = xmlHttp.responseText;
let userList = eval("(" + returnVal + ")");
}
}
2.遍历List,添加进table
table.insertRow(-1)
增加表格的行
tr.insertCell(0)
插入行内单元格
let table = document.getElementById("tbBody");
var len = table.childNodes.length;
for (let i = len - 1; i >= 0; i--) {
table.removeChild(table.childNodes[i]);
}
for (let i = 0; i < userList.length; i++) {
var tr = table.insertRow(-1);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
var td3 = tr.insertCell(2);
var td4 = tr.insertCell(3);
td1.innerHTML = userList[i].id;
td2.innerHTML = userList[i].username;
td3.innerHTML = userList[i].password;
td4.innerHTML = "<button class='delUser' onclick='delUser(this)'>
删除</button > 
<button class='updateUser' onclick='upPage(this)'>
修改</button>";
}
3.点击按钮获取当前tr对象
重点来了,删除和修改按钮的onclick函数形参一定要写this
形参,此时
this => <button>...</button>
然后在onclick
函数中通过获取两次parentNode
,最后可以得到当前按钮对应的tr
.
function delUser(obj) {
let id = obj.parentNode.parentNode.childNodes[0].innerText;
let username = obj.parentNode.parentNode.childNodes[1].innerText;
let password = obj.parentNode.parentNode.childNodes[2].innerText;
}
注意: js中的function
形参不要写this
,可以写obj
代替,否则容易冲突
4.获取对象后操作
获取按钮对应tr的所有数据后,就可以传入数据库对其进行操作啦
标签:表格,javascript,tr,parentNode,userList,let,var,table From: https://www.cnblogs.com/lichuanjiang/p/16859451.html