JS实现表格Table动态添加删除行
1、页面内容
<table style="border:1px ; width:100%; height:160px"> <THEAD> <TR> <TH height="10px">姓名</TH> <TH height="10px">性别</TH> <TH height="10px">部门</TH> <TH height="10px">工资</TH> <TH height="10px">操作</TH> </TR> </THEAD> <tbody id="tbodyUser"> </tbody> </table>
2、JS代码
//动态提交值到表格 function add(){//根据获取下拉框的值 var vname= $("#name").val(); var vsex= $("#sex").val(); var vdepartment= $("#department").val(); var vmoney= $("#money").val();
if(money== "" || money== undefined|| money== null){alert("未填写工资!");return false;}//获取tablevar tab = document.getElementById("tbodyUser");// 创建元素var tr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tab.appendChild(tr);td1.innerHTML = vname;td2.innerHTML = vsex;td3.innerHTML = vdepartment;td4.innerHTML = vmoney;td5.innerHTML = "<input type='button' value='删除' οnclick='del(this)' />";} //删除某行 function del(p){p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement); }
转载于:https://www.cnblogs.com/shoose/p/8393242.html
JS实现表格Table动态添加删除行相关推荐
- element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
- JavaScript学习(六)——表格的动态添加与删除
JavaScript学习(六)--表格的动态添加与删除 基本页面 首先是去创建一个基本页面,上面有一个表格来展示信息 <div><input id="id" ty ...
- js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)
***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...
- JS给table动态添加行和列
效果图: input为动态添加 <botton onclick="AddTableCell()">添加一列</botton><table id=&qu ...
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- js html body onload,动态添加页面body OnLoad事件的简单js代码
代码如下: /** * 动态添加页面onload事件 * Edit www.jbxue.com */ if (window.attachEvent) { window.attachEvent(&quo ...
- Js版本的打老鼠游戏--这里简单用一个图标表示老鼠 关键字:js对表格进行动态创建
该小程序的主题框架都有dom技术创建,已经给予良好的注释.有Js对表格的创建一个对表格栏目的删除.这个小程序耗时3小时,没办法,这就是我的水平. 下面为自定义边框,可以对栏目进行修改. 下面为主要的技 ...
- js实现简单的动态添加或删除一行数据
实现代码如下: <script type="text/javascript"> $(function(){ // 动态添加(此处未加样式图片路径等) //var li= ...
- 使用jquery实现table表格的动态添加行和列
<table class="table" border="1px" cellspacing="0" cellpadding=" ...
最新文章
- APP转让时提示:您必须移除要转让的 App 的所有构建版本和测试员,并清除“测试信息”下的所有信息
- Anaconda3 离线安装和配置 Django-3.2.7 使用 MySQL-5.7 数据库
- POJ1698 最大流或者匈牙利
- python文本框清空_用Python制作mini翻译器
- 一文理清面向对象(封装、继承、多态)+ 实战案例
- 多线程基础-实现多线程的两种方式(二)
- 前后端分离工程实现 (VUE、JAVA)、附全部源码
- HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
- jconsole是否可以在生产环境使用_jconsole使用
- excel函数手册_一个函数高手的成长之路
- python学习之小说爬虫
- Vivado Launching SDK Importing Hardware Specification error的解决方法
- 13. Use Objects to manage resources.
- 如何用计算机声卡录声音,录音声卡怎么设置 录音声卡设置教程
- lpad函数和rpad函数的用法
- 聚类分析的基本概念和方法
- inflate使用方法总结
- 【Android 逆向】ELF 文件格式 ( 安装 010 Editor 二进制查看工具的 ELF.bt 插件模板 | 安装 ELF.bt 模板 | 打开 ELF 文件 )
- redis使用及Spring Session+Redis实现Session共享
- 20行Python代码开发植物识别 app
热门文章
- 无聊的python课程_无聊的钢镚的python学习之路
- 蓝桥杯 算法训练 数字三角形(最简单的DP)
- busmaster 使用教程_Busmaster使用.pdf
- springboot引入lib包_springboot项目打包引入lib目录下jar包
- a标签右侧尖括号_没想到贴线缆标签有很多讲究和技巧?一般人真不知道
- java读取json配置文件_解决:java 读取 resources 下面的 json 文件
- 技术盘点:云原生中间件的技术演进与未来趋势展望
- 阿里云开源业内首个应用多活项目 AppActive,与社区共建云原生容灾标准
- 云原生已来,只是分布不均
- OAM 创始团队:揭秘 OAM Kubernetes 实现核心原理