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 相关文章推荐
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
取选中的radio的值
2010/01/11 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
JS二分查找算法详解
2017/11/01 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
房地产公司见习自我鉴定
2014/04/28 职场文书