Javascript-商品管理新增/删除/修改功能
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input { width: 100px; height: 25px; }
table { line-height: 30px; }
#add { width: 200px; height: 22px; }
input[type=checkbox] { width: 15px; height: 15px; vertical-align: middle; }
</style>
</head> <body style="text-align:center;"> <table border="1">
<thead>
<tr>
<td><input id="all" type="checkbox" onclick="check();" />全选</td>
<th>品名</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr> </thead> <tbody id="biao">
<tr id="row0"><!--默认初始行-->
<td><input name="xuan" type="checkbox" /></td>
<td>大馒头</td>
<td>20</td>
<td>15.00</td>
<td></td>
<td><input id="del" type="button" value="删除" onclick="dele('row0')" /> <input id="xg" type="button" value="修改" onclick="editL('row0')" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><input type="button" id="add" value="新增一行" onclick="xinzeng()" /></td>
</tr>
</tfoot> </table> </body>
</html>
<script type="text/javascript"> //默认初始行
var autoL = document.getElementById("row0").cells;
autoL[4].innerHTML = parseInt(autoL[2].innerHTML) * parseInt(autoL[3].innerHTML); //循环新增行
function xinzeng() {
var table = document.getElementById("biao");//找到需要设置功能的表格 var h_index = table.rows.length;//指定插入行的位置
var hang = table.insertRow(h_index);//在指定位置插入新增行
hang.id = "row" + h_index;//给新增行添加ID var lie1 = hang.insertCell(0);//给新增行插入列1
lie1.innerHTML = "<input name='xuan' type='checkbox' />";//新增行内容 var lie1 = hang.insertCell(1);//给新增行插入列2
lie1.innerHTML = "小馒头";//新增行内容 var lie2 = hang.insertCell(2);//给新增行插入列3
lie2.innerHTML = "20";//新增行内容 var lie3 = hang.insertCell(3);//给新增行插入列4
lie3.innerHTML = "15.00";//新增行内容 var lie4 = hang.insertCell(4);//给新增行插入列5
var prc = parseInt(lie2.innerHTML);//获取lie2的HTML内容，并转换为数字对象
var num = parseInt(lie3.innerHTML); //获取lie3的HTML内容，并转换为数字对象
lie4.innerHTML = prc * num;//计算两数字的积 var lie5 = hang.insertCell(5)//插入列6
var del = "<input id='del" + h_index + "' type='button' value='删除' onclick=\"dele('row" + h_index + "')\" />";//添加删除按钮，并注册删除事件
var mod = "<input id='mod" + h_index + "' type='button' value='修改' onclick=\"editL('row" + h_index + "')\" />";//添加修改按钮，并注册修改进入事件
lie5.innerHTML = del + " " + mod;
} //删除事件
function dele(h_dw) {
var h = document.getElementById(h_dw).rowIndex - 1;//定位删除元素所处的行
document.getElementById("biao").deleteRow(h);//deleteEow(index) 方法用于从表格删除指定位置的行.
//注意：参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和 <tfoot> 中的行与表中其它行一起编码。
} //修改进入事件
function editL(l_dw) {
var l = document.getElementById(l_dw).cells;//获取改行的单元格
text = l[2].innerHTML;//获取第三个单元格的HTML，用index定位
l[2].innerHTML = "<input type='text' value='" + text + "' style='width:30px' />";//改变它的HTML为可修改文本框
l[5].lastChild.value = "确定"; //改变修改按钮为确定按钮
l[5].lastChild.setAttribute("onclick", "upL('" + l_dw + "')")//给修改按钮注册确定事件，及修改退出事件
} //修改退出事件
function upL(l_dw) {
var l = document.getElementById(l_dw).cells;//获取改行的单元格
text = l[2].firstChild.value;//获取第三个单元格内的值
l[2].innerHTML = text;//改变它的HTML为文本值
l[5].lastChild.value = "修改";//改变确定按钮为修改按钮
l[5].lastChild.setAttribute("onclick", "editL('" + l_dw + "')")//给修改按钮重新注册回修改进入事件
l[4].innerHTML = parseInt(l[2].innerHTML) * parseInt(l[3].innerHTML);//重新计算lie2与lie3的结果
} //全选
function check() {
inputO = document.getElementsByName("xuan");//获取需要实现全选功能的按钮
for (i = 0; i < inputO.length; i++) {//循环，用此作为index，获取每一个inputO按钮
if (document.getElementById("all").checked == true) {//判断一个按钮处于选中状态时
inputO[i].checked = true;//所有按钮全部执行选中
} else {//否则
inputO[i].checked = false;//所有按钮全部执行未选中
}
} } </script>
Javascript-商品管理新增/删除/修改功能的更多相关文章
- JavaScript学习笔记-商品管理新增/删除/修改功能
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
- asp.net(C#)html无限分类树 可新增 删除 修改
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProductSort.aspx ...
- DB2 alter 新增/删除/修改列
SQL语句 增加列.修改列.删除列 1 添加字段 语法 : alter table 表名称 add 字段名称 类型 demo: alter table tableName add columnName ...
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能
守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...
- 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面
改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...
- [PHP] - Laravel - 列表、新增、修改、删除例子
前言 Laravel默认是自带了CURD的功能,使用路由的Route::resource可以做到. 但真正的项目中,这往往不是我们所需要的.因为一个项目会有比较复杂的计算.验证等功能. 下面是对项目中 ...
- 17、手把手教你Extjs5（十七）模块的新增、修改、删除操作
上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色.小数位数.零值是否显示.货币符号.单位显示在标题栏或者跟在金 ...
随机推荐
- Android之selector选择器的使用
1.selector简介 selector中文的意思选择器,在Android中常常用来作组件的背景,实现组件在不同状态下不同的背景颜色或图片的变换.使用十分方便.主要是用来改变ListView和But ...
- PAT甲级——【牛客练习题1002】
题目描述 Given an integer with no more than 9 digits, you are supposed to read it in the traditional Chi ...
- Python学习day34-面向对象和网络编程总结
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- Python学习day14-函数进阶（2）
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- python3-常用模块之openpyxl(1)
1.创建工作簿 from openpyxl import Workbook # 创建excel对象 wb = Workbook() # 获取第一个sheet = wb.active # 单元格写入内容 ...
- 在scrapy中过滤重复的数据
当为了确保爬到的数据中没有重复的数据的时候,可以实现一个去重的item pipeline 增加构造器方法,在其中初始化用于对与书名的去重的集合 在process_item方法中,先取出item中要判断 ...
- 洛谷P2333 [SCOI2006]一孔之见
传送门 辣鸡题目毁我人生败我前程 50分代码 //Achen #include<algorithm> #include<iostream> #include<cstrin ...
- SQL server插入数据后,获取自增长字段的值
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 insert into Tb_People(uname,er ...
- android服务的bindService/startService
1,高版本android已经不允许只通过action来bindService/startService,可以通过: intent.setPackage("XXXX"); 来指定服务 ...
- Java虚拟机系列（三）---内存溢出情况及解决方法
因为Java虚拟机内存有堆内存.方法区.虚拟机栈.本地方法栈和程序计数器五部分组成,其中程序计数器是唯一一块不会发生内存溢出异常的内存区,所以只有四类内存区可能发生内存溢出异常,其中虚拟机栈和本地方法 ...