JavaScript动态增删改表格数据

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         div { border: 1px solid #0094ff; text-align: center; width: 420px; margin: 5px auto; }

         #divNumEdit { float: right; width: 90px; border: 0px; margin: 0; }

         table { border-collapse: collapse; border: 1px solid #0094ff; width: 400px; margin: 5px auto; text-align: center; }

         td { border: 1px solid #0094ff; }

         input.count {width:32px; text-align:center;}

         #trTitle { font-weight: bolder; background-color: #4cff00; }

     </style>

 </head>

 <body>

     <div>

         <input type="button" value="新增菜单" id="btnAddOption" onclick="addMenuOption()" />

         <label>菜单:</label>

         <select id="selList">

             <option>兰州拉面</option>

             <option>肉夹馍</option>

             <option>手撕包菜</option>

             <option>西兰花炒蛋</option>

         </select>

         <label>数量</label>

         <div id="divNumEdit">

             <input type="button" value="+" onclick="EditNum(this);" />

             <label id="labelNum">0</label>

             <input type="button" value="-" onclick="EditNum(this)" />

         </div>

     </div>

     <div>

         <input type="button" value="新增订单" id="btnAddTr" onclick="addRowData()" />

     </div>

     <table id="tbList">

         <tr id="trTitle">

             <td>序号</td>

             <td>菜名</td>

             <td>数量</td>

             <td>编辑</td>

         </tr>

     </table>

     <div>

         <input type="checkbox" id="chkAll" onclick="checkAll()" /><label for="chkAll">全选</label>

         <a href="javascript:void(0)" onclick="delCheckedRow()">删除选中</a>

     </div>

     <script>

         var index = 1;

         var table = document.getElementById("tbList");

         var Name;

         var Count;

         var IsEditable = true;// 标示编辑操作是否可用.

         function addMenuOption() {

             var name = prompt("请输入菜单名...");

             if (name == null || name == "") return;//验证输入是否为空.

             var op = document.createElement("option");

             op.innerHTML = name;

             document.getElementById("selList").appendChild(op);

         }//增加菜单

         function EditNum(obj) {

             if (obj.value == "+") {

                 obj.nextElementSibling.innerHTML++;

             } else {

                 if (obj.previousElementSibling.innerHTML > 0)

                     obj.previousElementSibling.innerHTML--;

             }

         }//编辑数量

         function addRowData() {

             if (!IsEditable) return;

             if (document.getElementById("labelNum").innerHTML == 0) { return; }//如果数量为0,不增加行数据.

             var tr = document.createElement("tr");

             var tdId = document.createElement("td");

             var tdName = document.createElement("td");

             var tdCount = document.createElement("td");

             var tdAction = document.createElement("td");

             tdId.innerHTML = "<input type='checkbox' />" + index;

             tdName.innerHTML = document.getElementById("selList").value;

             tdCount.innerHTML = document.getElementById("labelNum").innerHTML;

             tdAction.innerHTML = '<a href="javascript:;" onclick="editRowData(this)">编辑</a>&nbsp<a href="javascript:;" onclick="delRowData(this)">删除</a>';

             tr.appendChild(tdId);

             tr.appendChild(tdName);

             tr.appendChild(tdCount);

             tr.appendChild(tdAction);

             table.appendChild(tr);

             index++;//增加序号.

         }//添加行数据.

         function delRowData(obj) {

             table.removeChild(obj.parentNode.parentNode);

         }//删除行数据.

         function editRowData(obj) {

             if (!IsEditable) return;

             var tr = obj.parentNode.parentNode;

             Name = tr.children[1].innerHTML;

             Count = tr.children[2].innerHTML;

             tr.children[1].innerHTML = "<select>" + document.getElementById("selList").innerHTML + "</select>";

             tr.children[1].children[0].value = Name;

             tr.children[2].innerHTML = '<input type="text" class="count" value="' + Count + '"/>';

             tr.children[3].innerHTML = '<a href="javascript:;" onclick="saveEdit(this)">保存</a>&nbsp<a href="javascript:;" onclick="cancelEdit(this)">取消</a>';

             IsEditable = false;

         }//编辑行数据

         function cancelEdit(obj) {

             var tr = obj.parentNode.parentNode;

             tr.children[1].innerHTML = Name;

             tr.children[2].innerHTML = Count;

             tr.children[3].innerHTML = '<a href="javascript:;" onclick="editRowData(this)">编辑</a>&nbsp<a href="javascript:;" onclick="delRowData(this)">删除</a>';

             IsEditable = true;

         }//取消编辑

         function saveEdit(obj) {

             var tr = obj.parentNode.parentNode;

             tr.children[1].innerHTML = tr.children[1].children[0].value;

             tr.children[2].innerHTML = tr.children[2].children[0].value;

             tr.children[3].innerHTML = '<a href="javascript:;" onclick="editRowData(this)">编辑</a>&nbsp<a href="javascript:;" onclick="delRowData(this)">删除</a>';

             IsEditable = true;

         }//保存编辑后的结果

         function checkAll() {

             var ck = document.getElementById("chkAll").checked;

             var tr;

             for (var i = 1; i < table.children.length; i++) {

                 tr = table.children[i];

                 tr.children[0].children[0].checked = ck;

             }

         }//全选

         function delCheckedRow() {

             var tr;

             var ck;

             for (var i = table.children.length-1; i >=1; i--) {

                 tr = table.children[i];

                 ck = tr.children[0].children[0].checked;

                 if (ck) table.removeChild(tr);

             }

         }//删除选中行

     </script>

 </body>

 </html>

JavaScript动态增删改表格数据的更多相关文章

BootStrap table动态增删改表格内数据
1:添加一个[操作]列 { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...
javaScript实现增删改查
自己写的一个html+javaScript实现增删改查小实例.下面是js代码1. [代码][JavaScript]代码 //1.创建受捐单位数组var arrOrgData = [ { & ...
Vc数据库编程基础MySql数据库的表增删改查数据
Vc数据库编程基础MySql数据库的表增删改查数据一丶表操作命令 1.查看表中所有数据 select * from 表名 2.为表中所有的字段添加数据 insert into 表名( 字段1,字段2 ...
vue原生表格怎样实现动态列及表格数据下载
最近项目经常用到带有合并效果以及动态列的表格,而翻阅iview和element-ui官网没有找到合适的(也有可能自己的水平有限,不会改写),所以只好自己用原生表格写了一个,具体效果如下: 这个表格右侧 ...
Vue3实现动态导入Excel表格数据
1. 前言在开发工作过程中,我们会遇到各种各样的表格数据导入,大部分我们的解决方案:提供一个模板前端进行下载,然后按照这个模板要求进行数据填充,最后上传导入,这是其中一种解决方案.个人认为还有另外 ...
jquery表格动态增删改及取数据绑定数据完整方案
一前言上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
jQuery动态增删改查表格信息，可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2
运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的inde ...
fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

随机推荐

004. Asp.Net Routing与MVC 之二：请求如何激活Controller和Action
上篇讲到请求到达 MvcRouteHandler ,并且透过 IRouteHandler.GetHttpHandler 获取到了真正的处理程序 MvcHandler 这次我们看看,MvcHandle ...
Entity Framework 5.0系列之自动生成Code First代码
在前面的文章中我们提到Entity Framework的"Code First"模式也同样可以基于现有数据库进行开发.今天就让我们一起看一下使用Entity Framework P ...
Android setTag方法的key问题
android在设计View类时,为了能储存一些辅助信息,设计一个一个setTag/getTag的方法.这让我想起在Winform设计中每个Control同样存在一个Tag. 今天要说的是我最近学习a ...
Window Ghosting
最近工作中遇到Window Ghosting这个问题, 感觉挺有意思,这里简单记录下. 在XP时代我们的程序没有响应后只能通过任务管理器强制杀掉,但是Vista之后情况变了, 我们仍然可以拖动失去响应 ...
用CSS实现居中的方式
直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中
[javaweb]Java过滤器与包装设计模式的实用案例.
在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...
Atitit 图像清晰度模糊度检测识别评价算法源码实现attilax总结
Atitit 图像清晰度模糊度检测识别评价算法源码实现attilax总结 1.1. 原理,主要使用像素模糊后的差别会变小1 1.2. 具体流程1 1.3. 提升性能可以使用采样法即可..1 ...
编写一个简单的C++程序
编写一个简单的C++程序每个C++程序都包含一个或多个函数(function),其中一个必须命名为main.操作系统通过调用main来运行C++程序.下面是一个非常简单的main函数,它什么也不干, ...
css3使用box-sizing布局
css3增添了盒模型box-sizing,属性值有下面三个: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)(所占空间)等于元素边框宽度(b ...
Tomcat源码解读系列（一）——server.xml文件的配置
Tomcat是J2EE开发人员最常用到的开发工具,在Java Web应用的调试开发和实际部署中,我们都可以看到Tomcat的影子.大多数时候,我们可以将Tomcat当做一个黑盒来看待,只需要将编写的J ...

JavaScript动态增删改表格数据

JavaScript动态增删改表格数据的更多相关文章

随机推荐

热门专题