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 ...
随机推荐
- 好用的SQL TVP~~独家赠送[增-删-改-查]的例子
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...
- 基于Winform、WPF等的客户端文件下载
有时候,我们用C#写一些客户端应用程序需要从服务器下载一些资源,如图片.dll.配置文件等.下面就来说一下,在Winform及WPF中如何下载文件. 我们的资源大多放在自己的网站上,或者从其他网站下载 ...
- Silverlight中文本框添加回车事件后，换行无法清除的解决方法
在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...
- 科蓝软件急招前端开发、PHP、.NET工程师
职位:前端开发 工作年限:不限 学历要求:大专 招聘人数:2 专业:不限 薪酬:面议 工作地点:浙江嘉兴.北京 岗位职责: 1.负责公司项目的UI设计: 2.负责将UI静态化 ...
- WKInterfaceImage 无法更新图片的问题
最近涉及到AppleWatch的相关项目,但有个奇怪问题无法解决,而且无法理解: 根据不同的用户操作,需要修改播放器的专辑图片. 不知道跟我的项目需求是不是有关系:我需要轮询共享空间,以拿取同步数据, ...
- MVVM架构~knockoutjs实现简单的购物车
返回目录 概念相关 购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用JS可以实现,但我认为,代码量 ...
- display的理解
display可把框内显示的内容改变(自我理解) none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有 ...
- Atitit. Api 设计 原则 ---归一化
Atitit. Api 设计 原则 ---归一化 1.1. 叫做归一化1 1.2. 归一化的实例:一切对象都可以序列化/toString 通过接口实现1 1.3. 泛文件概念.2 1.4. 游戏行业 ...
- qqzoneQQ空间漏洞扫描器的设计attilax总结
qqzoneQQ空间漏洞扫描器的设计attilax总结 1.1. 获取对方qq(第三方,以及其他机制)1 1.2. QQ空间的html流程1 1.3. 判断是否有权限1 1.4. 2015年度Web服 ...
- iOS-性能优化3
iOS-性能优化3 UITableView性能优化与卡顿问题 1.最常用的就是cell的重用, 注册重用标识符 如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell 如果 ...