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"> ...
- Mybatis-Plus 实战完整学习笔记(十一)------条件构造器删除,修改,conditon
1.修改功能--其他过滤方式跟select一样 /** * 修改条件构造器 * @throws SQLException */ @Test public void selectUpdate() thr ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别
JavaScript:学习笔记(7)——VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- 在Javascript操作JSON对象，增加 删除 修改
在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...
随机推荐
- cookie和session详解
cookie和session的区别 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同 ...
- mysql级联更新
MySQL 各种级联查询后更新(update select). CREATE TABLE `tb1` ( `id` int(11) NOT NULL, `A` varchar(100) defa ...
- Sqlserver2008R2 数据库镜像配置步骤
Sqlserver2008镜像功能可以保障数据库的高可用性.数据库镜像维护着数据库的两个副本,这两个副本必须分别放置在不同的SQL Server数据库实例中.可以用两台服务器也可以用一台服务器的不同实 ...
- ajax小结
1. http是一种无状态协议 2. http请求:四部分组成 ① http 请求的方法或动作,如:GET / POST ② 正在请求的URL,总得知道请求的地址是什么 ③ 请求头,包含一些客户端环境 ...
- NOIP2009pj道路游戏[环形DP 转移优化 二维信息]
题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 n 个机器人工厂编 ...
- VIJOS P1426兴奋剂检查[DP 状态哈希]
背景 北京奥运会开幕了,这是中国人的骄傲和自豪,中国健儿在运动场上已经创造了一个又一个辉煌,super pig也不例外……………… 描述 虽然兴奋剂是奥运会及其他重要比赛的禁药,是禁止服用的.但是运动 ...
- JAVA单例
单例模式: 1 public class Person{ 2 public static Person per//定义一个静态变量,用来储存当前类的对象 3 private Person()//构造方 ...
- 01 Hibernate错题分析
解析: 此题目考查的是对Hibernate中交叉连接的理解.HQL支持SQL风格的交叉连接查询,交叉连接适用于两个类之间没有定义任何关联时.在where字句中,通过属性作为筛选条件,如统计报表数据.使 ...
- poj[1185]炮兵阵地
Description 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用&quo ...
- git删除分支|查看分支动态
git不能在当前分支下删除你当前所在的分支,比如你要删除new分支,而现在正在处于new分支下,则执行git branch -d new的时候会报错 error: Cannot delete bran ...