JS实现简单的表格增删


Posted in Javascript onJanuary 16, 2020

本文实例为大家分享了JS实现表格增删的具体代码,供大家参考,具体内容如下

描述:

JS——实现简单的表格增删。

效果:

JS实现简单的表格增删

实现:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<!--4、编号:文本框
书名:文本框
作者:文本框
出版社:文本框
添加按钮
表格
编号 书名 作者 出版社 删除-->
</head>
 <body>
 <div id="all">
 <p>编    号:<input type="text" class="in"></p>
 <p>书    名:<input type="text" class="in"></p>
 <p>作    者:<input type="text" class="in"></p>
 <p>出版社 :<input type="text" class="in"></p>
 <p>            
  <input type="button" value="添加" id="tj">
       
  <input type="button" value="清除" id="cle">
 </p>
 </div>
 <script>
 
 var ins,tj,qc,tab,all;
 var bookData=["编号","书名","作者","出版社","删除"];
 init();
 
 function init() {
  all=document.getElementById("all");
  ins=document.getElementsByClassName("in");
  tj=document.getElementById("tj");
  qc=document.getElementById("cle");
  del=document.getElementById("del");
 
  tj.addEventListener("click",clickHandler);
  qc.addEventListener("click",clickQcHandler);
  creatTable();
 }
 
 
 function creatTable() {
  tab = $c("table", all, {
  width:"500px",
  borderCollapse:"collapse"
  });
  for (var i = 0; i < ins.length+1; i++) {//购物车表单数据赋值
  var th = $c("th", tab, {
   textAlign: "center",
   border: "1px solid #000000"
  });
  th.textContent=bookData[i];
  }
 }
 
 function clickHandler() {
  var tr = $c("tr", tab, {
  textAlign: "center",
  border: "1px solid #000000"
  });
  for (var i = 0; i < ins.length+1; i++) {//购物车表单数据赋值
  var td = $c("td", tr, {//列的创建
  textAlign: "center",
   border: "1px solid #000000"
  });
  if(i<ins.length){
   td.textContent = ins[i].value;
  }
  else if(i==ins.length){
   var del=$c("button", td);
   del.textContent="删除";
   del.addEventListener("click",clickDelHandler);
  }
  }
 }
 
 function clickDelHandler(e) {//删除 一行
  this.parentNode.parentNode.remove();
 }
 
 function clickQcHandler(e) {//清除 全部
  tab.remove();
  creatTable();
 }
 
 function $c(type,parent,style) {
  var elem=document.createElement(type);
  if(parent) parent.appendChild(elem);
  for(var key in style){
  elem.style[key]=style[key];
  }
  return elem;
 }
 
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
JS实现基本的网页计算器功能示例
Jan 16 #Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 #Javascript
js实现简单的秒表
Jan 16 #Javascript
JS 数组基本用法入门示例解析
Jan 16 #Javascript
js实现上下左右键盘控制div移动
Jan 16 #Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 #Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
You might like
php eval函数一句话木马代码
2015/05/21 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
页面中js执行顺序
2009/11/09 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
Python 初始化多维数组代码
2008/09/06 Python
Python创建xml的方法
2015/03/10 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
学python最电脑配置有要求么
2020/07/05 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
民事和解协议书格式
2014/11/29 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
学习心得体会
2019/06/20 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
mysql sql常用语句大全
2022/06/21 MySQL