原声JS实现表格行的添加
Posted 王俊儒2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原声JS实现表格行的添加相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var tab = null; //先定义一个空对象，准备作为表格对象使用
var arr = [ //定义一个二维数组作为表格内，每次添加行时候的内容输入，这是一次添加三行
[1,‘lisi‘,10,],
[2,‘zhangsan‘,11,],
[3,‘wangwu‘,12,]
];
// var tds = null; //定义一个空对象，准备作为单元格对象使用
window.onload = function(){ //页面加载完成后找到表格对象
tab = document.getElementById(‘tab‘);
}
//用来作为追加行的方法
function addTr(){
for(var i = 0 ; i<arr.length;i++){ //循环这个数组 追加数组内元素有几行准备添加几行
tab.innerHTML += `<tr data = "`+arr[i][0]+`">
<td onclick = "edit(this)">`+arr[i][0]+`</td>
<td onclick = "edit(this)">`+arr[i][1]+`</td>
<td onclick = "edit(this)">`+arr[i][2]+`</td>
<td><button onclick="delTr(this)">删除</button></td>
</tr>` //妈的，以上这是一个终极字符串拼接
}
// console.log(tab);
// tds = document.getElementsByTagName("td"); //每一次追加完行，更新所有的单元格对象
// console.log(tds);
}
//当点击某一个单元格的时候调用这个方法
function edit(obj){
obj.innerHTML = `<input type="text" onBlur="change(this)" value="`+obj.innerHTML+`">`;//给这个单元格本身添加一个可编辑的区域 并添加一个失去焦点的事件执行一个函数change（并指定这个对象本身），它的值就是这个在单元格内编辑的内容
obj.removeAttribute(‘onClick‘); //然后再删除onclick属性
}
function change(obj){ //当单元格对象内的ipt失去焦点时执行这个函数
var tdDom = obj.parentElement; //找到这个对象的父元素
console.log(tdDom);
tdDom.innerHTML = obj.value; //单元格对象的父元素在HTML中显示的是用户输入内容（用值来获取）
tdDom.setAttribute("onClick","edit(this)"); //并且同时获取两个属性（点击事件，编辑此区域）
}
function delTr(obj){ //删除这一行的方法
obj.parentElement.parentElement.remove(); // 删除：【这个单元格（对象）本身的父元素的父元素是行】
}
</script>
</head>
<body>
<input type="text" onBlur="change(this)">
<button onClick="addTr()">点击增加一行</button>
<table id="tab" width="80%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="25%">编号</th>
<th width="25%">姓名</th>
<th width="25%">年龄</th>
<th width="25%">操作</th>
</tr>
</table>
</body>
</html>
以上是关于原声JS实现表格行的添加的主要内容，如果未能解决你的问题，请参考以下文章