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 onclick='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;
}

}