标签：form cells tr JS var innerText input 增删 table
删除
通过点击按钮实现删除操作，使用remove来删除整行数据。
function deleRow(a){
//通过传参获取他的父级元素tr
var tr = a.parentNode.parentNode;
//通过remove来进行删除
tr.remove();
}
修改
首先通过cells获取到单元格的一个数组，将单元格每一个值赋值input中的value，可以在input元素中进行修改，修改之后再将每一个value赋值给td中，让它实现在table表格中
var id = cells[0].innerText;
var name = cells[1].innerText;
var sex = cells[2].innerText;
var phone = cells[3].innerText;
var address = cells[4].innerText;
var ary = [id,name,sex,phone,address];
for(var i = 0;i<ary.length;i++){
var input = document.createElement("input");
var a = ary[i];
if(a==null){
}else{
input.value = ary[i];
}
form.appendChild(input);
}
for(var i = 0;i<cells.length-1;i++){
cells[i].innerText = form.elements[i].value;
}
添加
通过insertRow在表格的最后一行添加数据，insertCell在tr的最后一个单元格插入数据。
var table = document.getElementById("tab");
//通过rows返回所有行的一个数组，再用insertRow在最后一行插入数据
var tr = table.insertRow(table.rows.length);
var form = document.getElementById("form");
var length = form.length;
for(var i = 0;i<length;i++){
//通过insertCell在tr中的最后一个单元格插入数据
var td = tr.insertCell(i);
//最后将值赋值给单元格
td.innerText = form.elements[i].value;
//最后一个td直接为固定的
if(i == length-1){
td.innerHTML = '<input type="button" value="更 新" οnclick="updateTab(this)" />' +
'<input type="button" value="删除" οnclick="deleRow(this)" />'
}
}
代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid black;
border-collapse: collapse;
}
td,tr,th{
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
body{
width: 80%;
margin: 0 auto;
}
</style>
<script type="text/javascript">
function deleRow(a){
//通过传参获取他的父级元素tr
var tr = a.parentNode.parentNode;
//通过remove来进行删除
tr.remove();
}
function updateTab(b){
var tr = b.parentNode.parentNode;
var cells = tr.cells;
console.log(cells.length);
//通过cells获取到单元格的一个数组，并赋值给变量
var id = cells[0].innerText;
var name = cells[1].innerText;
var sex = cells[2].innerText;
var phone = cells[3].innerText;
var address = cells[4].innerText;
var ary = [id,name,sex,phone,address];
del();
addForm(ary,tr);
}
//因为每次点击更新按钮会出现新的input，所以要把之前的input给删除掉
function del(){
//通过id获取form标签
var form = document.getElementById("form");
//通过角标删除form中的input标签，因为每次删除的一个所以form的长度会变化，将长度的值赋值给变量
var length = form.length;
for(var i = 0;i<length;i++){
form.elements[0].remove();
}
}
function addForm(ary,tr){
var form = document.getElementById("form");
//如果ary为空则创建一个空数组，
if(ary == null){
ary = new Array(5);
}
for(var i = 0;i<ary.length;i++){
var input = document.createElement("input");
var a = ary[i];
//如果为空则创建一个空的input框
if(a==null){
}else{
input.value = ary[i];
}
form.appendChild(input);
}
var input = document.createElement("input");
//在input标签中添加属性
if(tr == null){
input.setAttribute("onclick","addInput()");
input.setAttribute("type","button");
input.setAttribute("value","确认添加");
form.appendChild(input);
}else{
input.setAttribute("type","button");
input.setAttribute("value","确认修改");
console.log(tr.rowIndex);
input.setAttribute("onclick","save("+ tr.rowIndex +")");
form.appendChild(input);
}
}
function save(a){
//rows获取到行
var tr = document.getElementById("tab").rows[a];
var form = document.getElementById("form");
var length = form.length;
//cells获取到单元格的数组
var cells = tr.cells;
for(var i = 0;i<cells.length-1;i++){
//通过for循环赋值给td
cells[i].innerText = form.elements[i].value;
}
del();
}
function add(){
del();
addForm(null,null);
}
function addInput(){
var table = document.getElementById("tab");
//通过rows返回所有行的一个数组，再用insertRow在最后一行插入数据
var tr = table.insertRow(table.rows.length);
var form = document.getElementById("form");
var length = form.length;
for(var i = 0;i<length;i++){
//通过insertCell在tr中的最后一个单元格插入数据
var td = tr.insertCell(i);
//最后将值赋值给单元格
td.innerText = form.elements[i].value;
//最后一个td直接为固定的
if(i == length-1){
td.innerHTML = '<input type="button" value="更新" οnclick="updateTab(this)" />' +
'<input type="button" value="删除" οnclick="deleRow(this)" />'
}
}
}
function init(){}
</script>
</head>
<body onl oad="init()">
<form id="form"></form>
<input type="button" value="添加" onclick="add()" />
<table id="tab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>手机号</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>1888888888</td>
<td>花果山</td>
<td>
<input type="button" value="更新" onclick="updateTab(this)" />
<input type="button" value="删除" onclick="deleRow(this)" />
</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>16666666666</td>
<td>火焰南山</td>
<td>
<input type="button" value="更新" onclick="updateTab(this)" />
<input type="button" value="删除" onclick="deleRow(this)" />
</td>
</tr>
</table>
</body>
</html>
标签：form,cells,tr,JS,var,innerText,input,增删,table 来源： https://blog.csdn.net/qq_45746493/article/details/111116007
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。