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> <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> <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> <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> <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 ...
随机推荐
- 前端自动化测试工具doh学习总结（一）
前言 项目中需要用到前端自动化测试,自己被当作一个探针研究了下目前用的比较多的web自动化测试工具.一开始研究的是的selenium,但由于项目使用了大量的dijit控件,写起testCase来很费劲 ...
- 【MVC】bootstrap-paginator 分页插件笔记
bootstrap-paginator基于bootstrap框架,使用起来非常简单.github地址:https://github.com/lyonlai/bootstrap-paginator 在b ...
- prerender-SPA程序的SEO优化策略
随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single ...
- 通过分析iframe和无阻塞脚本关系能让我们更懂iframe
在我上篇文章里,我提到一种使用iframe完成无阻塞脚本加载的方式,因为我对iframe的偏见很大,所以上篇文章里我没有展开讨论这个问题. 文章发表后有位网友问了我这样一个问题,下面是他问题的原文,如 ...
- hash_map的简洁实现
hash_map的简洁实现 hash_map是经常被使用的一种数据结构,而其实现方式也是多种多样.如果要求我们使用尽可能简单的方式实现hash_map,具体该如何做呢? 我们知道hash_map最 ...
- java.util.Properties
1 Properties文件中分隔符及空格的处理 因为 Properties 继承于 Hashtable,所以可对 Properties 对象应用 put 和 putAll 方法.但强烈反对使用这两个 ...
- 230行实现一个简单的MVVM
作者:mirone链接:https://zhuanlan.zhihu.com/p/24451202来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. MVVM这两年在前端届 ...
- Andrew Ng机器学习公开课笔记 -- 支持向量机
网易公开课,第6,7,8课 notes,http://cs229.stanford.edu/notes/cs229-notes3.pdf SVM-支持向量机算法概述, 这篇讲的挺好,可以参考 先继 ...
- 搭建LNAMP环境（四）- 源码安装PHP7
上一篇:搭建LNAMP环境(三)- 源码安装Apache2.4 一.安装PHP7 1.yum安装编译php需要的包 yum -y install libxml2 libxml2-devel curl- ...
- WPF入门教程系列十二——依赖属性（二）
二. 依赖属性的优先级 由于WPF 允许我们可以在多个地方设置依赖属性的值,所以我们就必须要用一个标准来保证值的优先级别.比如下面的例子中,我们在三个地方设置了按钮的背景颜色,那么哪一个设置才会是最终 ...