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 ...
随机推荐
- 在英文版操作系统中安装的MS SQL server,中文字段无法匹配
在英文版的操作系统中安装的MS SQL server,会出现中文字段无法被匹配到.其原因在于英文环境下安装的MS SQL server的排序规则不包括中文. 所以解决办法就是更改MS SQL serv ...
- Aoite 系列(04) - 强劲的 CommandModel 开发模式（上篇）
Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.CommandModel 是一种开发模式,我把它成为"命令模型",这是一 ...
- Programming Entity Framework CodeFirst--数据库约定和配置
这一章主要主要讲的是我们的模型如何映射到数据库,而不影响模型,以及不同的映射场景. 一.表名和列名 1.指定表名 [Table("PersonPhotos")] public cl ...
- 基于正则的INI读写工具类，支持加密解密
看到这个标题,有人会问,现在都用xml做配置文件了,谁还用INI文件啊!下面来简单对比一下xml和ini: 1.XML功能强大表达能力强,同时扩展性好. 2.它的主要优势是异构平台的整合.通讯. 3. ...
- FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
- 浅谈Excel开发：三 Excel 对象模型
前一篇文章介绍了Excel中的菜单系统,在创建完菜单和工具栏之后,就要着手进行功能的开发了.不论您采用何种方式来开发Excel应用程序,了解Excel对象模型尤其重要,这些对象是您与Excel进行交互 ...
- 浅谈Excel开发：一 Excel 开发概述
做Office相关的开发工作快一年多了,在这一年多里,在插件的开发中遇到了各种各样的问题和困难,还好同事们都很厉害,在和他们的交流讨论中学到了很多的知识.目前Office相关的开发资料是比较少 ...
- Springlake-02 权限&文档设置&Role设置&Folder设置&登录
1. 权限 有3个默认的权限用户: 1.System Owner so 管理员权限全部:Type Setup; Group Setup; Form Setup; Role Setup; Share R ...
- java gc的考察
参考http://www.cnblogs.com/mazj611/p/3481610.html 看了很多博客.书, 仍然有所不懂.很多看过即忘记.实在要不得. 我们可以通过jstat获取gc情况 js ...
- Redis教程(十五)：C语言连接操作代码实例
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/143.html 在之前的博客中已经非常详细的介绍了Redis的各种操作命令 ...