JS实现简单的表格增删

2024-10-21 11:20:38

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

纯原生js实现table表格的增删

公司实习生问我table的增删操作,用jQuery很简单的实现了.又问我不使用jQuery,只使用js如何实现. 面对这种情况,我的一贯做法是'不理解,但是支持'. jQuery用的多了,人也懒了,但还是用js实现了这一操作,觉得难点在于IE兼容... 只是想找代码看看的可以跳过分析过程,文章底部附有完整代码. 以下是coding过程: HTML结构代码一个基本的table结构,增加了一些简单的样式,三个按钮分别对应创建.清空,和一个预留. <!DOCTYPE HTML> <html&
JavaScript实现动态增删表格的方法

在上方文本框填入"姓名/Email/ 年龄",实现在下方表格中动态添加或删除单元格效果: 1. Html代码: <body> <p align="center" id="info"> 姓名 : <input type="text" id = "username"> Email : <input type="text" id = "em
JS对HTML表格进行增删改操作

要求如下: 写一个html页面,里面有一个表格,储存用户信息,包括:用户名,密码,姓名,邮箱,电话,qq,身份证号. 现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录: 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名:英文+数字+下划线: 密码:英文+数字+下划线+6位以上: 姓名:中文: 邮箱,电话,qq,身份证号符合格式: 每条记录有修改.删除: 修改类似增加,要把原来
Vue+Mock.js模拟登录和表格的增删改查功能

前言关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 5 项目不背锅(等后端给接口的话可能会背锅) 等等优点,最后一条我加的. 第一步先安装mock.js npm install mockjs --save-dev 第二步使用 mock.js import Mock from 'mockjs' 哪里用就在哪里引入.我是在项目src/mock/index.js里面使用moc
JS动态增删表格行的方法

本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行
javascript实现表格增删改操作实例详解

本文实例讲述了javascript实现表格增删改操作的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
vue.js+Element实现表格里的增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充之前用过angularjs 用到后来发现越来越难学于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue
AngularJS实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
JS实现简单的表格增删

本文实例为大家分享了JS实现表格增删的具体代码,供大家参考,具体内容如下描述: JS--实现简单的表格增删. 效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--4.编号:文本框书名:文本框作者:文本框出版社:文本框
JS简单实现表格排序功能示例

本文实例讲述了JS简单实现表格排序功能的方法.分享给大家供大家参考,具体如下: 思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt
JS实现简单表格排序操作示例

本文实例讲述了JS实现简单表格排序操作.分享给大家供大家参考,具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html" charset="utf-8"> <title>sort table</title> <style> *{ margin:0px; pad
JS组件Bootstrap Table表格多行拖拽效果实现代码

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
利用jQuery实现一个简单的表格上下翻页效果

前言本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&
VUE写一个简单的表格实例

目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展--个性化设置正文: 我以前是后端(asp.net)开发,会点js.jQuery,但是不会写js特效,至于css嘛,拿来用现成的可以,自己动手写就不会了. 发现现在前端开发的势头太猛了,有一点要干掉后端的感觉,于是萌发了想要学一学前端开发的想法.那么前端三大框架,先学哪一个呢?就先学学Vue吧,为啥呢?很简单呀,他只
vue.js的简单自动求和计算实例

一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>
js实现简单的日历显示效果函数示例

本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格table生成,分成两个部分. 第一个部分:就是前面的第一排,我用一行<tr></tr>显示,这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期: 第二部分:就是剩下的所有排,这里我用五行<tr></tr>显示,这一部分表示的是这个月份和下个月份的日期
js实现简单选项卡制作

本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下实现功能通过点击按钮查看相应的介绍: 按钮相应的变色: 内容相应的切换: html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
js实现简单扫雷

本文实例为大家分享了js实现简单扫雷的具体代码,供大家参考,具体内容如下实现效果: 总体思想:这个扫雷难点主要就两点:第一点就是雷的随机分布,我这里使用js动态生成了10X10的table表格,然后设定生成20个雷,然后在生成每个格子代表的数字,雷我们用9表示,因为0-8要被其他非雷格子使用,然后我们只要一格是雷区那么周围的格子都加一,这样我们的雷区就生成好了,然后玩法的编写主要难点就是在当点击数字为0时的格子时要把它周围的0区也显示出来,因此这里我们使用递归来实现 1.界面的生成 //生成界

JS实现简单的表格增删

相关推荐

随机推荐