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展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色.小数位数.零值是否显示.货币符号.单位显示在标题栏或者跟在金 ...
随机推荐
- Linux虚拟机ip为127.0.0.1的处理
Redhat系列(Cnetos)打配置文件在/etc/sysconfig/network-scripsts/ifcfg-eth0(在Centos6.5开始就有这种情况了) 打开配置文件找到ONBOOT ...
- 跟我一起实战美团网一之[nodemon] app crashed - waiting for file changes before starting...
环境准备 第一步安装 npm install -g npx npx create-nuxt-app at-app 与事件相关的包我们再安装一次 npm install --update-binary ...
- 在输入一个url到返回页面，中间发生了什么？
在浏览器中输入url,客户端先检查本地是否有对应的ip地址,如果找到了则返回响应的ip地址,如果没有找到则会请求DNS服务器,返回解析后的ip地址.应用层客户端发送HTTP请求,包括请求头和请求体.其 ...
- 汇编语言LAHF和SAHF指令
LAHF(加载状态标志位到 AH)指令将 EFLAGS 寄存器的低字节复制到 AH.被复制的标志位包括:符号标志位.零标志位.辅助进位标志位.奇偶标志位和进位标志位.使用这条指令,可以方便地把标志位副 ...
- vim 插入行号
:let i=1000000|g/^/s//\=i.' '/|let i=i+1
- 第二章 Odoo 12开发之开发环境准备
在更深入了解 Odoo 开发之前,我们应配置好开发环境并学习相关的基础管理任务.本文中,我们将学习创建 Odoo 应用所需用到的工具和环境配置.这里采用 Ubuntu 系统来作为开发服务器实例的主机, ...
- BZOJ 1822[JSOI2010]Frozen Nova 冷冻波
网络流+二分. n^3枚举判断每个巫妖可以攻击的精灵,向其连1的边,每个精灵向汇点连1的边. 二分答案,修改源点流向每个巫妖的cap,跑最大流看是否等于精灵数. 恩,看起来没什么毛病. 然后狂WA不止 ...
- SQL2005自动备份，定期删除的维护计划及自动定期清除日志
作为一名DBA,他们最常见的日常任务是: 1)定期完成数据库的完全备份或差异备份.2)定期清理备份文件,因为存储空间有限,可能只需要保存一个时期段内的文件(比如一周内或一月内). 而如何做到这两点呢? ...
- Python基础---三大推导式
推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据结构构建另一个新的数据结构的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...
- 使用MySQL会话变量实现窗口函数
一.MySQL窗口函数 (1) 序号函数 row_number()在相等的两条记录上随机排序,但序号按照1.2递增,然后后面的序号继续递增为3,中间不会产生序号间隙: rank()/dense_ran ...