用JS对table里添加，删除行的学习

最新推荐文章于 2022-12-01 23:44:13 发布
最新推荐文章于 2022-12-01 23:44:13 发布
阅读量191 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mayicanyun/article/details/79613852
版权

          最近几天完成了对JS中DOM和DOM节点，节点对象，Element对象，Attribute对象的学习。DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

       今天的作业是制作一个可以通过input 来直接对表格添加行，在表格每行的备注栏里添加删除按钮，点击删除按钮直接删除该行。算是对学习的节点只是的简单应用：

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom练习</title>
</head>
<body>
姓名：<input type="text" id="name" />
联系方式：<input type="text" id="email" />
年龄：<input type="text" id="age"/>
<input type="button" value="添加用户" οnclick="addLine()"/><br>
<br /><br /><hr /><br />
<table id="userTable" align="center" border=1 cellspacing=0 cellpadding=5 width="50%">
    <tr>
        <th>姓名</th>
        <th>联系方式</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>xiaowang</td>
        <td>xiaowang@163.com</td>
        <td>15</td>
        <td>
            <input type="button" value="删除" οnclick="delLine(this)" />
        </td>
    </tr>


</table>




<script>
function addLine(){
var name=document.getElementById('name');
var namevalue=name.value;
var email=document.getElementById('email');
var emailvalue=email.value;
var age=document.getElementById('age')
var agevalue=age.value;
var table=document.getElementById('userTable');
var addrow='<tr><td>'+namevalue+'</td><td>'+emailvalue+'</td><td>'+agevalue+'</td><td> <input type="button" value="删除" οnclick="delLine(this)" /></td></tr>';
var oldrow=table.innerHTML;
var addrow=oldrow+addrow;
table.innerHTML=addrow;
}
function delLine(ob){
var deltr=ob.parentNode.parentNode;
var table=deltr.parentNode;
table.removeChild(deltr);
}
</script>
</body>
</html>

   

未有期~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用js将json数据导出excel(xls、xlsx、csv)，并过滤掉不需要的数据
Cahier
03-29 5529
首先看一下json数据的格式，这是其中一条的格式我们只需要label中的值和value中的值导出到excel中 [{ "type": "text", "required": true, "label": "姓名", "className": "form-control", "name": "text-1553770509298", "value": "xx", "subtype"...
js添加删除行功能实现
09-14
js添加删除行功能实现 4个不同的实现方法
JavaScript table 动态添加行，列
04-20
无标题文档 function show() { var num1=document.getElementById('num1').value; var num2=document.getElementById('num2').value; var myDiv=document.getElementById('showDiv'); var _table=document.createElement("table"); _table.id="table2"; //设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i<num1;i++){ var _tr=_table.insertRow(i); //创建八列 for(var j=0;j<num2;j++){ var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString()); var t=document.createElement("input"); t.size=20; _td.appendChild(t); } } myDiv.appendChild(_table); }
js操作新增和删除行同时重写编号和每行的id和name值
puyan1027981382的博客
08-21 2783
html代码如下 " readOnly> comment, "class='form-control'");?> taskId, "class='form-control'");?>
11.14课后作业-完成table.html中删除行、添加行的功能。
Zaiaj的博客
11-14 331
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 姓名：<input type="text" id="name" /> 联系方式：<input type="text" id="email" /> 年龄：<input type="te
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
在Vue.js中，使用Element UI库操作...以上就是关于在Vue.js项目中使用Element UI表格组件进行添加行、修改、单独删除行以及批量删除行操作的详细实现方法。通过这些方法，可以为Vue.js项目构建功能完善的数据管理界面。
js实现对table动态添加、删除和更新的方法
10-24
本文将介绍如何使用JavaScript实现对HTML表格中动态添加、删除和更新行（Row）的方法，这些操作能够帮助开发者更加灵活地管理表格数据。 首先，我们需要了解HTML中表格的基本结构。一个表格由多个`<table>`标签构成...
利用jquery给指定的table动态添加一行、删除一行的方法
10-21
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
js实现table添加行tr、删除行tr、清空行tr的简单实例
10-21
本实例主要展示了如何使用JavaScript来实现对表格（`<table>`）中的行（`<tr>`）进行添加、删除和清空的操作。我们将深入探讨这些功能的实现细节。 1. **添加行（`<tr>`）** 添加行的功能通过`insertRow()`方法...
TypeScript 中 any、unknown、never 和 void
fe_watermelon的博客
12-01 904
any 是任意类型，具有所有类型的行为，可被执行，可访问属性，超脱于类型系统之外。unknown 则是类型更安全的 any，同样可以将任何类型赋给它，但不能执行任何操作，必须用类型断言来显示说明类型才能去执行操作。never 是无法观测的类型，比如不会执行完的函数的返回值，合并结果不存在的交叉类型。在类型编程中非常活跃，常用于丢弃一些子类型。void 就比较简单，只是代表函数没有返回值，没有其他的场景了。我是前端西瓜哥，欢迎关注我，学习更多前端知识。
JS方法实现table中Row的添加删除
peng_jian_ming
04-23 758
function addRow(){ var dataBox = document.getElementById("skinRow"); var oTr = dataBox.insertRow(dataBox.rows.length); var oTd = oTr.insertCell(); oTd.in...
[Javascript]在HTML页面中动态添加表格，动态生成行的示例
小李专栏
11-18 1万+
"http://www.w3.org/TR/html4/loose.dtd">动态添加表格示例//CopyRight@liwei 2005/11//动态删除行的函数还没有完成。注意innerHTML里面的控件代码属性赋值的时候不要使用引号function addLine(){    var newLine = planTable.rows.length;    var row = planTabl
JavaScript简单有效的删除Table中的一行
系统运维
08-08 252
&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; function Goto(){} function deleteCurrentRow(obj){ var tr=obj.parentNode.parentNode; var tbody=tr.pa...
HTML动态增加和删除表格的行和列
热门推荐
huzijia888的博客
12-03 4万+
起始状态 增加行 增加列 删除行 删除列 function addrow(){   var c=document.getElementById('mytable');//获得表格的信息   if( c.rows.length==0){//如果是向一个空表增加一行  var x=c.insertRow(0);//
动态添加删除table页面一行input表格
蜗牛学习笔记
04-15 2万+
之前写过两篇关于HTML页面添加结点，删除结点的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行，删除行，碰巧那会儿比较闲，就动手写了一下，记录下来，希望能帮到需要的朋友们。 上面的代码中，首先在body中构造了一个table，为了方便后续的操作，我们给table添加了thead 和 tbody 标签，thead标签标示的是表格头，tbody标签标示的是表格主体。 示例中的表格，共有三列，第一列 first name，第二列 last name，第三列为操作列。 操作列中，包含两个操作，一个是给
js 动态操作table 表格 在指定行后添加行 删除行
清叶 的专栏
11-16 9360
//根据ID删除table行 var tr_id = $("#addTable>tbody>tr:last").attr("id"); if(tr_id == '123'){ $('#'+tr_id).remove(); //删除ID=123的行 } //在指定ID行下面添加行 var tr = 'add4add4add4add4addaddaddadd'; var zhid
JS中根据id删除一行数据
你只管努力，
11-13 1万+
function del(tableID, obj) {    var rowIndex = obj.parentElement.parentElement.rowIndex;    obj.parentElement.parentElement.parentElement.deleteRow(rowIndex);  } 从申请中剔除
全新转转交易猫自带客服多模板全开源完整定制版源码
最新发布
08-27
定制版全开源完整无授权 商品发布； 请在后台商品添加成功后， 再点击该商品管理，可重新编辑当前商品的所有信息及配图以及支付等等相关信息 可点击分享或者跳转，将链接地址进行发布分享 请在手机端打开访问 访问商品主要模板文件路径目录 咸鱼; http://你的域名地址/Xianyu_goods/ 代练妈妈;http://你的域名地址/dlmm/ 大麦商品;http://你的域名地址/dm/dzpj.php 大麦售票;http://你的域名地址/dm/dzp.php 交易猫; http://你的域名地址/jym/ QQ卡框工具;http://你的域名地址/kk/ 京东; http://你的域名地址/www.jd.com/index1.php 转转;http:/ 安装教程； 环境； PHP版本5.6，数据库版本MySQL 5.6 第一步源码上传解压 第二步找到config文件夹找到Conn.php修改数据库 第三步导入数据库sql.sql 第四步http://域名/wuyun.php登录后台 默认登录后台账号及密码； 默认账号；admin 默认密码；123456 源码内附详细搭建教程TXT文档
html table批量添加行与删除行,js实现对table的增加行和删除行的操作方法
05-12
要实现对 HTML 表格的增加行和删除行，可以使用 JavaScript。以下是实现的方法： 1. 添加行： 首先，获取到要添加行的表格对象（如 `var table = document.getElementById('myTable');`）。 然后，创建一个新的行对象（如 `var row = table.insertRow();`）。 接下来，为新行对象添加单元格（如 `var cell1 = row.insertCell();`）。 最后，设置单元格的值（如 `cell1.innerHTML = "新单元格";`）。 完整示例代码如下： ```javascript // 获取表格对象 var table = document.getElementById('myTable'); // 创建新行对象 var row = table.insertRow(); // 添加单元格 var cell1 = row.insertCell(); // 设置单元格的值 cell1.innerHTML = "新单元格"; ``` 2. 删除行： 首先，获取到要删除行的表格对象（如 `var table = document.getElementById('myTable');`）。 然后，获取要删除的行对象（如 `var row = table.rows[index];`）。 接下来，调用表格对象的 `deleteRow()` 方法，传入要删除的行的索引（如 `table.deleteRow(index);`）。 完整示例代码如下： ```javascript // 获取表格对象 var table = document.getElementById('myTable'); // 获取要删除的行对象 var row = table.rows[index]; // 删除行 table.deleteRow(index); ``` 以上就是对 HTML 表格进行增加行和删除行的操作方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值