<!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. mysql优化之索引篇

    对mysql优化是一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引unique.全文索引] c: 分表技术(水平 ...

  2. java enum(枚举）的使用

    在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的“数据集” ...

  3. 关于Leetcode上二叉树的算法总结

    二叉树,结构很简单,只是比单链表复杂了那么一丢丢而已.我们先来看看它们结点上的差异: /* 单链表的结构 */ struct SingleList{ int element; struct Singl ...

  4. [转]ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略

    本文转自:http://blog.csdn.net/chenhongwu666/article/details/41392529/ asp.net UpdatePanel实现异步局部刷新 如有雷同,不 ...

  5. Spring之IoC总结帖

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development a ...

  6. 初探网络编程--TCP套接字编程演示

    今天看了一下<计算机网络:自顶向下方法>,也就是计算机网络的教材的应用层一章,决定实现以下后面的Java C/S应用程序的例子,用来演示TCP和UDP套接字编程. 程序流程如下: 1.一台 ...

  7. IT菜鸟的第一天

    小弟愚钝,被别人影响,打算入IT行业试试水的深浅,俗话说技不压身,多会一种就多一条路子,抱着这种求知的心态我就开始的我在汉企的IT生涯! 第一天无非就是简介,对IT行业的介绍,反正听得我挺懵的,不过介 ...

  8. idea常用快捷键

    十大Intellij IDEA快捷键 2015-01-16 21:31 122307人阅读 评论(38) 收藏 举报 本文章已收录于: .embody { padding: 10px 10px 10p ...

  9. 移动端API开发

    手机APP接口   接口:客户端发送一个请求到服务器 接口:1.URL地址:http://域名/控制器/方法  或者 https://    2.test.php处理客户端发送数据    3.数据返回 ...

  10. 利用T-Sql语句中的二重循环打印乘法口诀表

    --定义三个初始化变量 declare @a int,@b int,@c varchar(200) --对@a进行赋值 set @a=1 --循环输出9次,@a为被乘数 while(@a<=9) ...