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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
Javascript之datagrid查询详解
Sep 15 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 无限分类的树类代码
2009/12/03 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python中count函数知识点浅析
2020/12/17 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
一套PHP的笔试题
2013/05/31 面试题
空字符串(“”)和null的区别
2012/11/13 面试题
最新计算机专业自荐信
2013/10/16 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
关于环保的标语
2014/06/13 职场文书
新教师培训心得体会
2014/09/02 职场文书
个人委托书范文
2015/01/28 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python