原生javascript点击获取table表格数据

本文主要分享,如何通过点击元素,利用原生js去获取table表格中的对象和数据,并进行操作:

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");
     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 >&emsp;
		 <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的所有数据后,就可以传入数据库对其进行操作啦!