<!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')" />&nbsp;<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 + "&nbsp;" + 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学习笔记-商品管理新增/删除/修改功能的更多相关文章

  1. Javascript-商品管理新增/删除/修改功能

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. Mybatis-Plus 实战完整学习笔记(十一)------条件构造器删除,修改,conditon

    1.修改功能--其他过滤方式跟select一样 /** * 修改条件构造器 * @throws SQLException */ @Test public void selectUpdate() thr ...

  3. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  4. Javascript学习笔记三——操作DOM(二)

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  5. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

    JavaScript:学习笔记(7)——VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...

  6. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  7. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...

  8. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  9. 在Javascript操作JSON对象,增加 删除 修改

    在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...

随机推荐

  1. 解决SecureCRT中文编码乱码

    1.mysql表和列都已经设置UTF-8了,然后还是不能输入中文和中文显示乱码. 2.在SecureCRT下: 执行英文设置:export LANG=zh_CN.UTF-8后不能直接输入中文. 然后执 ...

  2. HTML属性的长度问题

    越来越多的同学喜欢把数据存放在html属性上,比如 <p data-info="{a:1,b:2}">xxx</p> 一堆JSON数据放在data-info ...

  3. 理解 OpenStack Swift (2):架构、原理及功能 [Architecture, Implementation and Features]

    本系列文章着重学习和研究OpenStack Swift,包括环境搭建.原理.架构.监控和性能等. (1)OpenStack + 三节点Swift 集群+ HAProxy + UCARP 安装和配置 ( ...

  4. [转]Oracle Form 触发器执行顺序

    Trigger 不是数据库中的触发器,不过功能类似,都是当某个事件发生的时候会触发. Trigger中可以编写代码,当对应事件发生的时候就会执行该Trigger中的代码. Oracle Form中的T ...

  5. Markdown(MD)写作

    简洁的写作 目前正逐步使用Makedown来写博客或其它的文档,本文记录一下Markdown的相关知识 Markdown语法 标题 # 内容 (一级标题) ## 内容 (二级标题) ### 内容 (三 ...

  6. java中有类似C#里ref或out的功能吗?

    JAVA中都是值传递.JAVA中的“引用”和C++中的引用有本质的区别,倒是和C++中的指针非常类似.可以将JAVA的引用理解为“不支持指针运算的指针”.所以可以说JAVA中其实并不存在真正的引用,所 ...

  7. [多图]Windows 10 Build 10565今推送:优化界面菜单 Cortana改进

    酷站网软:此前的Windows Build 10558并没有向公众发布,而是直到近日才向Fast Ring用户推送了更多功能和改进的Build 10565版.除之前版本上的加入了Messaging.E ...

  8. [No000038]操作系统Operating Systems -CPU

    管理CPU ,先要使用CPU… CPU 的工作原理 CPU上电以后发生了什么? 自动的取指 — 执行 CPU 怎么工作? CPU怎么管理? 管理CPU 的最直观方法 设好PC 初值就完事! 看看这样做 ...

  9. RecyclerView,CardView导入和使用(Demo)

    简介: 这篇文章是ANDROID L——Material Design详解(UI控件)的一个补充或者说是应用实例,如果有时间建议大家稍微浏览一下上篇文章. 本文主要介绍Android L新增加的两个U ...

  10. 在Android中如何获取视频的第一帧图片并显示在一个ImageView中

    String path  = Environment.getExternalStorageDirectory().getPath(); MediaMetadataRetriever media = n ...