JS 页面表格的操作

var showObj = null;
var arr = [
[‘编号’,’姓名’,’性别’,’年龄’,’备注’,’操作’],
[‘1′,’lisi’,’nan’,’12’,’66666′],
[‘2′,’lisi’,’nan’,’12’,’66666′],
[‘3′,’lisi’,’nan’,’12’,’66666′],
[‘4′,’lisi’,’nan’,’12’,’66666′]
];
window.onload = function(){
init();
addTab();
}
function init(){
showObj = document.getElementById(‘show’);
}
function addTab(){
var tabObj = document.createElement(‘table’);
tabObj.setAttribute(‘border’,’1′);
for (var i = 0; i < arr.length; i++) {//tr循环
var trObj = document.createElement(‘tr’);
//寻找删除行的编号
trObj.setAttribute(‘num’,i);
for (var k = 0; k < arr[i].length; k++) {//td循环
var tdObj = null;
if (i == 0) {
tdObj = document.createElement(‘th’);
}else{
tdObj = document.createElement(‘td’);
//添加点击变文本事件
tdObj.onclick = tdEdit;
}
tdObj.innerHTML = arr[i][k];
trObj.append(tdObj);
}
if (i >= 1) {
tdObj = document.createElement(‘td’);
var CzBtn = document.createElement(‘button’);
CzBtn.innerHTML = ‘删除’;
CzBtn.setAttribute(“onclick”,”dletr(‘”+ i +”‘)”);
tdObj.append(CzBtn);
trObj.append(tdObj);
// tdObj.innerHTML = “<button οnclick=’deltr(“+ i +”)’>删除</button>”;
// tdObj.append(CzBtn);

}
tabObj.append(trObj);
}
showObj.append(tabObj);
}
//点击添加一行
function addTr(){
var trObj = document.createElement(‘tr’);
for (var k = 0; k < arr[0].length; k++) {
var tdObj = document.createElement(‘td’);
tdObj.innerHTML = arr[1][k];
trObj.append(tdObj);
}

var tabObj = document.getElementsByTagName(‘table’)[0];
tabObj.append(trObj);
}
function dletr(num){
var trs = document.getElementsByTagName(‘tr’);
for (var i = 0; i < trs.length; i++) {
var zhi = trs[i].getAttribute(‘num’);
if (zhi == num) {
trs[i].remove();
break;
}
}
}
//文本文档可以修改
function tdEdit(){
var tdObj = this;

tdObj.innerHTML = “<input id=’editInput’ type=’text’>”;

tdObj.onclick = null;
// 监听回车事件
var editInput = document.getElementById(‘editInput’);
if (editInput.onkeyup == 13) {
tdObj.innerHTML = editInput.value;
tdObj.onclick = tdEdit;
}

}

 

转载于:https://www.cnblogs.com/Ice-K/p/10713259.html

原文链接：https://blog.csdn.net/weixin_30342827/article/details/98694114

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。