JavaScript订单操作小程序完整版


Posted in Javascript onJune 23, 2017

本文实例为大家分享了完整的订单操作小程序(增加订单,删除订单,修改订单数量),供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table {
      text-align: center;
    }
  </style>
  <script>
    function delRow(id) {
      //取得要删除的那一行
      var row = document.getElementById(id);//按照id来找到行
      var table = document.getElementById('mytb');
      table.deleteRow(row.rowIndex);//按照行的索引删除某行的内容
    }
    function addrow() {
      var mytb = document.getElementById('mytb');
      var index = mytb.rows.length - 1;//取得插入目标索引,某行
      var row = mytb.insertRow(index);//把行插入到某个位置,插入某行
      var id = 'row' + row.rowIndex;//拼接id
      row.setAttribute('id', id);//设置id
      var td0 = row.insertCell(0);//td0创建一个单元格
      td0.innerHTML = "好看耐用超耐磨沙发两件套";//设置td0的内容
      var td1 = row.insertCell(1);
      td1.innerHTML = row.rowIndex;//把行的索引赋给td1的内容
      var td2 = row.insertCell(2);//把td2插入在某个单元格里面
      td2.innerHTML = '<input type="button" value="删除" onclick="delRow(\'' + id + '\')">' +
        '<input type="button" value="修改" id="update" onclick="update(\'' + id + '\')">';
    }
    function update(id) {
      var row = document.getElementById(id);
      var td1 = row.cells[1];
      var v = td1.innerHTML;
      td1.innerHTML = '<input type="text" style="width:30px" value="' + v + '">';
      row.cells[2].innerHTML = '<input type="button" value="删除" onclick="delRow(\'' + id + '\')">' +
        '<input type="button" value="确定" id="update" onclick="comfirmrow(\'' + id + '\')">';
    }
    function comfirmrow(id) {
      var row=document.getElementById(id);
      var td1=row.cells[1];//取得各行的第二个单元格
      var input=td1.firstChild;//取得input标签
      var v=input.value;//取得input的内容
      td1.innerHTML=v;//把内容赋给td1
      var td2=row.cells[2];
      td2.innerHTML = '<input type="button" value="删除" onclick="delRow(\'' + id + '\')">' +
        '<input type="button" value="修改" id="update" onclick="update(\'' + id + '\')">';
    }
  </script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="mytb">
  <tr>
    <td>商品名</td>
    <td>数量</td>
    <td>操作</td>
  </tr>
  <tr id="del1">
    <td>好看耐用超耐磨沙发两件套</td>
    <td>24</td>
    <td><input type="button" value="删除" onclick="delRow('del1')"><input type="button" value="修改"></td>
  </tr>
  <tr>
    <td colspan="3"><input type="button" value="增加订单" onclick="addrow()"></td>
  </tr>
</table>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 #Javascript
JavaScript实现简单的树形菜单效果
Jun 23 #Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 #Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
js实现城市级联菜单的2种方法
Jun 23 #Javascript
JS使用正则表达式验证身份证号码
Jun 23 #Javascript
创建简单的node服务器实例(分享)
Jun 23 #Javascript
You might like
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python模块restful使用方法实例
2013/12/10 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Python数据可视化图实现过程详解
2020/06/12 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
《乡愁》教学反思
2014/02/18 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
在职员工证明书
2014/09/19 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
财务审计整改报告
2014/11/06 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书