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 = { ...
随机推荐
- dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法
dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法 grub 启动菜单后加入 rootdelay=90, 如下:/boot/vmlinuz-2.6.3 ...
- C语言中链表任意位置怎么插入数据？然后写入文件中？
链表插入示意图:(图是个人所画)因为链表指针指来指去,难以理解,所以辅助画图更加方便. 插入某个学号后面图: 定义的结构体: struct student { ]; //学生学号 ]; //学生姓名 ...
- linux 通过scp 复制备份恢复mysql数据表
最近客户有个需求,小弟对于运维的东西也是半瓶醋,所以就果断的摸索了下.折磨了一个晚上终于算是搞定了.因为是两个不同的服务器,本来想用ftp,无奈小弟不是很熟悉,所以就用了scp,但是scp有个问题就是 ...
- 将报表移动端集成到自有移动端app方法【IOS、Android】
应用场景 用户有自己的app,希望把报表的移动端[本文中以FineReport移动端为例]功能集成到他们的app里面去,而不需要安装两个app.Android端和IOS端的集成接口是不一样的,下面我们 ...
- plain framework 1 参考手册 入门指引之 简明教程
简明教程 简单的例子 实现代码 简单的例子 如果你已经下载好整个框架的源码,那么你可以在这里找到应用的例子: plainframework/applications/pf_simple 如果你在win ...
- 《Invert》开发日志03：一些想法
本来标题想写“详细设计”,但是由于独立游戏开发有很强的探索性,最终项目一定是经过原型调整迭代而来的,所以在实际效果出来之前把设计做得太细并没有太大意义,现在只能先陈列目前的一些想法,不能定义“它是什么 ...
- codeforces 732
A. Buy a Shovel time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- javascript删除元素节点
1.删除元素父节点 function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElem ...
- Moom for mac 最棒的窗口管理软件
win7下,鼠标拖动窗口向左.右,两个窗口就在一个桌面上平分秋色了 mac下只能使用三只爪向上的手势查看当前桌面运行的程序,或者三只爪左右滑动查看全屏显示的其他程序,有时候一边看书一边敲代码很不方便 ...
- sql语句获取今天、昨天、近7天、本周、上周、本月、上月、半年数据
话说有一文章表article,存储文章的添加文章的时间是add_time字段,该字段为int()类型的,现需要查询今天添加的文章总数并且按照时间从大到小排序,则查询语句如下: select * fro ...