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动态添加删除行相关推荐

  1. element表格攻略大全,表头合并,表格合并,动态添加一列

    elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...

  2. JavaScript学习(六)——表格的动态添加与删除

    JavaScript学习(六)--表格的动态添加与删除 基本页面 首先是去创建一个基本页面,上面有一个表格来展示信息 <div><input id="id" ty ...

  3. js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)

    ***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...

  4. JS给table动态添加行和列

    效果图: input为动态添加 <botton onclick="AddTableCell()">添加一列</botton><table id=&qu ...

  5. js活jQuery实现动态添加、移除css/js文件

    下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

  6. js html body onload,动态添加页面body OnLoad事件的简单js代码

    代码如下: /** * 动态添加页面onload事件 * Edit www.jbxue.com */ if (window.attachEvent) { window.attachEvent(&quo ...

  7. Js版本的打老鼠游戏--这里简单用一个图标表示老鼠 关键字:js对表格进行动态创建

    该小程序的主题框架都有dom技术创建,已经给予良好的注释.有Js对表格的创建一个对表格栏目的删除.这个小程序耗时3小时,没办法,这就是我的水平. 下面为自定义边框,可以对栏目进行修改. 下面为主要的技 ...

  8. js实现简单的动态添加或删除一行数据

    实现代码如下: <script type="text/javascript"> $(function(){ // 动态添加(此处未加样式图片路径等) //var li= ...

  9. 使用jquery实现table表格的动态添加行和列

    <table class="table" border="1px" cellspacing="0" cellpadding=" ...

最新文章

  1. APP转让时提示:您必须移除要转让的 App 的所有构建版本和测试员,并清除“测试信息”下的所有信息
  2. Anaconda3 离线安装和配置 Django-3.2.7 使用 MySQL-5.7 数据库
  3. POJ1698 最大流或者匈牙利
  4. python文本框清空_用Python制作mini翻译器
  5. 一文理清面向对象(封装、继承、多态)+ 实战案例
  6. 多线程基础-实现多线程的两种方式(二)
  7. 前后端分离工程实现 (VUE、JAVA)、附全部源码
  8. HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
  9. jconsole是否可以在生产环境使用_jconsole使用
  10. excel函数手册_一个函数高手的成长之路
  11. python学习之小说爬虫
  12. Vivado Launching SDK Importing Hardware Specification error的解决方法
  13. 13. Use Objects to manage resources.
  14. 如何用计算机声卡录声音,录音声卡怎么设置 录音声卡设置教程
  15. lpad函数和rpad函数的用法
  16. 聚类分析的基本概念和方法
  17. inflate使用方法总结
  18. 【Android 逆向】ELF 文件格式 ( 安装 010 Editor 二进制查看工具的 ELF.bt 插件模板 | 安装 ELF.bt 模板 | 打开 ELF 文件 )
  19. redis使用及Spring Session+Redis实现Session共享
  20. 20行Python代码开发植物识别 app

热门文章

  1. 无聊的python课程_无聊的钢镚的python学习之路
  2. 蓝桥杯 算法训练 数字三角形(最简单的DP)
  3. busmaster 使用教程_Busmaster使用.pdf
  4. springboot引入lib包_springboot项目打包引入lib目录下jar包
  5. a标签右侧尖括号_没想到贴线缆标签有很多讲究和技巧?一般人真不知道
  6. java读取json配置文件_解决:java 读取 resources 下面的 json 文件
  7. 技术盘点:云原生中间件的技术演进与未来趋势展望
  8. 阿里云开源业内首个应用多活项目 AppActive,与社区共建云原生容灾标准
  9. 云原生已来,只是分布不均
  10. OAM 创始团队:揭秘 OAM Kubernetes 实现核心原理