iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript订单操作小程序的示例分析
  • 771
分享到

JavaScript订单操作小程序的示例分析

2024-04-02 19:04:59 771人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关javascript订单操作小程序的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!

这篇文章将为大家详细讲解有关javascript订单操作小程序的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

具体内容如下

<!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"  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订单操作小程序的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript订单操作小程序的示例分析

本文链接: https://www.lsjlt.com/news/70509.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript订单操作小程序的示例分析
    这篇文章将为大家详细讲解有关JavaScript订单操作小程序的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!...
    99+
    2024-04-02
  • JavaScript怎么实现订单操作小程序
    这篇文章主要介绍了JavaScript怎么实现订单操作小程序的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript怎么实现订单操作小程序文章都会有所收获,下面我们一起来看看吧。具体代码如下<!...
    99+
    2023-06-20
  • JavaScript操作表单的示例分析
    这篇文章主要为大家展示了“JavaScript操作表单的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript操作表单的示例分析”这篇文章吧...
    99+
    2024-04-02
  • JavaScript中DOM操作的示例分析
    这篇文章主要介绍JavaScript中DOM操作的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:一、DOM概念1. "D":Docment,指的...
    99+
    2024-04-02
  • JavaScript属性操作的示例分析
    这篇文章将为大家详细讲解有关JavaScript属性操作的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、属性的设置和获取1、属性的设置和获取主要有两种方式:<!DOCTYPE ...
    99+
    2023-06-29
  • 小程序globalData的示例分析
    这篇文章主要为大家展示了“小程序globalData的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“小程序globalData的示例分析”这篇文章吧。小...
    99+
    2024-04-02
  • JavaScript展开操作符的示例分析
    这篇文章主要介绍JavaScript展开操作符的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!你可以通过展开操作符(Spread operator)...扩展一个数组对象和字...
    99+
    2024-04-02
  • 微信小程序的示例分析
    这篇文章主要介绍微信小程序的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!未来的发展趋势未来的发展趋势是一切触手可及。比如去餐馆吃饭,扫一扫二维码就可以看菜单、点菜、付款;到公交站台,扫一扫二维码就知道有哪些...
    99+
    2023-06-26
  • 微信小程序手势操作之单触摸点与多触摸点的示例分析
    这篇文章给大家分享的是有关微信小程序手势操作之单触摸点与多触摸点的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Demo 为了研究小程序是否支持多手指,需要使用touch...
    99+
    2024-04-02
  • 小程序​如何显示操作菜单
    这篇“小程序如何显示操作菜单”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“小程序如何显示操作菜单”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具...
    99+
    2023-06-26
  • JavaScript数组基本操作的示例分析
    这篇文章主要为大家展示了“JavaScript数组基本操作的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript数组基本操作的示例分析”这篇文章吧。一、初识数组数组构成:数...
    99+
    2023-06-29
  • JavaScript中HTML元素操作的示例分析
    小编给大家分享一下JavaScript中HTML元素操作的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、获取操作的元...
    99+
    2024-04-02
  • Javascript操作dom对象之select的示例分析
    小编给大家分享一下Javascript操作dom对象之select的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!htm...
    99+
    2024-04-02
  • JavaScript DOM元素常见操作的示例分析
    这篇文章主要介绍JavaScript DOM元素常见操作的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:DOM概念DOM(Document Object Model...
    99+
    2024-04-02
  • swiper小程序开发示例分析
    这篇“swiper小程序开发示例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“swiper小程序开发示例分析”文章吧。 ...
    99+
    2023-06-26
  • JavaScript中数组各种操作的示例分析
    这篇文章主要介绍JavaScript中数组各种操作的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!声明一个数组原来是如下声明:var s = new Array();但是 现...
    99+
    2024-04-02
  • 店长小程序开发的示例分析
    这篇文章将为大家详细讲解有关店长小程序开发的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。店长小程序开发:随着时间的流逝,城市化的脚步逐渐加快,行业的内容也不断向外扩展,对于门店老板来说内容的不断...
    99+
    2023-06-27
  • 小程序websocket心跳库的示例分析
    这篇文章给大家分享的是有关小程序websocket心跳库的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。介绍websocket-heartbeat-miniprogram...
    99+
    2024-04-02
  • 小程序缓存插件的示例分析
    这篇文章主要为大家展示了“小程序缓存插件的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“小程序缓存插件的示例分析”这篇文章吧。背景wx.request是...
    99+
    2024-04-02
  • 小程序中云开发的示例分析
    这篇文章将为大家详细讲解有关小程序中云开发的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 云开发简介由于小程序本身存储数据的能力有限,所以不可能将大量的数据...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作