<!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. Vue小案例 之 商品管理------批量删除与商品数量的调整

    通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...

  3. asp.net(C#)html无限分类树 可新增 删除 修改

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProductSort.aspx ...

  4. DB2 alter 新增/删除/修改列

    SQL语句 增加列.修改列.删除列 1 添加字段 语法 : alter table 表名称 add 字段名称 类型 demo: alter table tableName add columnName ...

  5. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  6. 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能

    守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...

  7. 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面

    改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...

  8. [PHP] - Laravel - 列表、新增、修改、删除例子

    前言 Laravel默认是自带了CURD的功能,使用路由的Route::resource可以做到. 但真正的项目中,这往往不是我们所需要的.因为一个项目会有比较复杂的计算.验证等功能. 下面是对项目中 ...

  9. 17、手把手教你Extjs5（十七）模块的新增、修改、删除操作

    上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色.小数位数.零值是否显示.货币符号.单位显示在标题栏或者跟在金 ...

随机推荐

  1. iOS之CGAffineTransform属性详解和方法使用

    1.CGAffineTransform简介 UIView有个属性transform,是CGAffineTransform类型.可以使其在二维界面做旋转.平移.缩放单独或者组合动画! CGAffineT ...

  2. 版本控制git之三-多人协作 变基 推送 拉取 删除远程分支

      版本控制git之三-多人协作 wangfeng7399已关注0人评论350人阅读2019-02-20 21:33:08   如果你想获得一份已经存在了的 Git 仓库的拷贝,比如说,你想为某个开源 ...

  3. PAT甲级——A1009 Product of Polynomials

    This time, you are supposed to find A×B where A and B are two polynomials. Input Specification: Each ...

  4. re 模块 （正则的使用）

    一.正则表达式 英文全称: Regular Expression. 简称 regex或者re.正则表达式是对字符串操作的一种逻辑公式. 我们一般使用正则表达式对字符串进行匹配和过滤. 使用正则的优缺点 ...

  5. 使用git命令将本地项目推送到远程仓库

    将本地项目推送到远程仓库 这里先放一张图, 有助于理解git命令 1. 在GitHub上新建一个仓库 注意不要勾选自动生成README.md文件, 否则会产生某些问题, README.md文件到时可以 ...

  6. 基于在树上走的DP问题

    笔者已经很久没有打过题解了,如果打题解,就总是要连着一个知识点来打题解. 最近做过一共两道这样的题目.笔者认为这样的题有较强的可拓展性,比较有意义. 所以就打一篇博客. 问题概述 先说说这是个什么样的 ...

  7. C语言函数指针和回调函数

    彻底搞定C指针-函数名与函数指针 函数名&函数名取地址 函数指针 通常我们可以将指针指向某类型的变量,称为类型指针(如,整型指针).若将一个指针指向函数,则称为函数指针. 函数名的意义 函数名 ...

  8. JS中对象转数组方法总结

    1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: 'nihao', 1: 'haha', 2: 'ga ...

  9. ubuntu触摸板失效问题

    很早便遇到这个问题,今天忍无可忍才度娘了一发.亲测有效! 用Ubuntu Tweak备份过桌面的配置,因此我尝试恢复桌面设置,果然奇迹发生了,触摸板立刻恢复了正常使用! 没有备份过的相信使用其中的重置 ...

  10. jeecms v9.3 has a stroed xss vulnerability

    转载:https://blog.csdn.net/libieme/article/details/83588929 jeecms v9.3 has a stroed xss vulnerability ...