JS-表格行的动态删除和添加(insertRow deleteRow)

row[]返回包含表格中所在行的一个数组

insertRow()在表格中插入一个新行

insertCell()在新添加的行中添空的<td>元素

deleteRow()删除行

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>表格行的动态删除和添加</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13         //增加
14         function addLine(){
15             //获取text中填写的姓名
16             var username=document.getElementById("username").value
17             //获取表格对象
18             var testTb=document.getElementById("testTb")
19             //row[]返回包含表格中所在行的一个数组
20             //insertRow()在表格中插入一个新行
21             //向表格的最下面添加一行
22             var addRow=testTb.insertRow(testTb.rows.length);
23             //添加行的id，便于删除时使用
24             addRow.id=new Date().getTime();//使用时间戳获得唯一值
25             //在新添加的行中添空的<td>元素
26             var newobj1=addRow.insertCell(0)
27             var newobj2=addRow.insertCell(1)
28             //在<td元素中添加获取到的姓名
29             newobj1.innerHTML=username;
30             newobj2.innerHTML='<input type=\'button\'  value=\'删除\' οnclick=\'delrow('+addRow.id+')\'>'
31         }
32
33         //删除
34         function delrow(trId){
35             //window.confirm的返回值是true和false
36             var ok=window.confirm("确定要删除吗");
37             //获取表格
38             var testTb=document.getElementById("testTb")
39             if(ok){
40                 //获取要删除行的index
41                 var trobj=document.getElementById(trId);
42                 var index=trobj.rowIndex;
43                 //选择确定，进行删除该行
44                 testTb.deleteRow(index);
45
46             }
47         }
48     </script>
49
50     <input type="text" id="username" value="">
51     <input type="button" value="新增" οnclick="addLine()">
52     <table id="testTb" border="1" width="200px">
53         <tr>
54             <td>姓名</td>
55             <td>操作</td>
56         </tr>
57         <!--
58         <tr>
59             <td>张三</td>
60             <td >
61                 <input type="button" value="删除" οnclick="delrow()">
62             </td>
63         </tr>
64         -->
65     </table>
66
67  </body>
68 </html>

转载于:https://www.cnblogs.com/xiuxiu123456/p/8471655.html

JS-表格行的动态删除和添加(insertRow deleteRow)相关推荐

用js实现表格行的动态添加与删除
对应的html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
svn在linux下的使用（svn命令行）ubuntu 删除新增添加提交状态查询恢复
合并步骤:(1)先切换到分支:(2)svn merge trunk . (3)svn sw trunk (4)svn merge --reintegrate branch . svn merge ht ...
JS元素的提取，删除，添加，修改
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
vue el-table表格行内容增加删除线
效果图: 利用element提供的:cell-class-name方法 methods:{delLine({ row, column, rowIndex, columnIndex }) {if (!r ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
jquery tr 移除背景色_用jQuery remove()方法删除表格行(table tr)的写法
jQuery删除表行(table tr):本文介绍如何删除选定的表行(table tr).如何用jQuery按钮单击事件,按id或class-name删除表行. 在按钮单击时,我们删除选定的行/ tr ...
js如何动态添加表格行
一.总结方法一:添加可通过在table的innerHTML属性中添加tr和td来实现方法二:通过table的属性insertRow(),deleteRow()来实现方法一和方法二对比: 二.js ...
动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
js动态删除表格中的某一行
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
JavaScript实现动态添加页面的表格行数并获取数据
JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了. <table cellpadding="0" ...

JS-表格行的动态删除和添加(insertRow deleteRow)

JS-表格行的动态删除和添加(insertRow deleteRow)相关推荐

最新文章

热门文章