简单的增加订单 修改 删除

最新推荐文章于 2024-01-23 13:15:00 发布
最新推荐文章于 2024-01-23 13:15:00 发布
阅读量407 收藏 6
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53867976/article/details/120541358
版权

简单的增加订单 修改 删除

实现表格功能 增加订单 删除 修改

css部分的内容

body{
	font-size:15px;
	line-height:20px;
	}
table{
	border-top: 1px solid;
	border-left: 1px solid
}
td{
	border-right: 1px solid;
	border-bottom: 1px solid;
	text-align:center;
	}

js内容

function dateFilter(date){
	    if(date < 10){return "0"+date;}
	    return date;
}

function deleteOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //行位置
	document.getElementById("order").deleteRow(row); 
}

function addOrder(){
   var addTable=document.getElementById("order");
   var row_index=addTable.rows.length-1;       //新插入行在表格中的位置
   var newRow=addTable.insertRow(row_index);  //插入行
   newRow.id="row"+row_index;                 //赋值新插入行的ID
   
   var col1=newRow.insertCell(0);
   col1.innerHTML="一箱苹果";
   
   var col2=newRow.insertCell(1);
   col2.innerHTML=row_index*2;
   
   var col3=newRow.insertCell(2);
   col3.innerHTML=row_index*10+"元";
   
   var col4=newRow.insertCell(3);
   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' οnclick=\"deleteOrder(this)\" />&nbsp;<input id='edit"+row_index+"' type='button' value='修改' οnclick=\"editOrder(this)\" />";

	}
	

	
function editOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //修改行所在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].innerHTML;
	var text=col[1].innerHTML;
	var text1=col[2].innerHTML;
	
	col[0].innerHTML="<input name='name"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[0].firstChild.focus();
	col[0].firstChild.select();
	col[1].innerHTML="<input name='num"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[1].firstChild.focus();
	col[1].firstChild.select();
	col[2].innerHTML="<input name='price"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[2].firstChild.focus();
	col[2].firstChild.select();
	
	col[3].lastChild.value="保存修改";
	col[3].lastChild.setAttribute("onclick","upOrder(this)");
	
	
	}
	
function upOrder(btn){
	var row=btn.parentNode.parentNode.rowIndex;   //行在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].firstChild.value;
	var text=col[1].firstChild.value;
	var text1=col[2].firstChild.value;
	col[0].innerHTML=text0;
	col[1].innerHTML=text;
	col[2].innerHTML=text1;
	col[3].lastChild.value="修改";
	col[3].lastChild.setAttribute("onclick","editOrder(this)");


}

完整代码

<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>订单</title>
<style type="text/css">

body{
	font-size:15px;
	line-height:20px;
	}
table{
	border-top: 1px solid;
	border-left: 1px solid
}
td{
	border-right: 1px solid;
	border-bottom: 1px solid;
	text-align:center;
	}

</style>
<script type="text/javascript">
	
//值小于10时，在前面补0
function dateFilter(date){
	    if(date < 10){return "0"+date;}
	    return date;
}

function deleteOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //行位置
	document.getElementById("order").deleteRow(row); 
}

function addOrder(){
   var addTable=document.getElementById("order");
   var row_index=addTable.rows.length-1;       //新插入行在表格中的位置
   var newRow=addTable.insertRow(row_index);  //插入行
   newRow.id="row"+row_index;                 //赋值新插入行的ID
   
   var col1=newRow.insertCell(0);
   col1.innerHTML="一箱苹果";
   
   var col2=newRow.insertCell(1);
   col2.innerHTML=row_index*2;
   
   var col3=newRow.insertCell(2);
   col3.innerHTML=row_index*10+"元";
   
   var col4=newRow.insertCell(3);
   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' οnclick=\"deleteOrder(this)\" />&nbsp;<input id='edit"+row_index+"' type='button' value='修改' οnclick=\"editOrder(this)\" />";

	}
	

	
function editOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //修改行所在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].innerHTML;
	var text=col[1].innerHTML;
	var text1=col[2].innerHTML;
	
	col[0].innerHTML="<input name='name"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[0].firstChild.focus();
	col[0].firstChild.select();
	col[1].innerHTML="<input name='num"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[1].firstChild.focus();
	col[1].firstChild.select();
	col[2].innerHTML="<input name='price"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[2].firstChild.focus();
	col[2].firstChild.select();
	
	col[3].lastChild.value="保存修改";
	col[3].lastChild.setAttribute("onclick","upOrder(this)");
	
	
	}
	
function upOrder(btn){
	var row=btn.parentNode.parentNode.rowIndex;   //行在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].firstChild.value;
	var text=col[1].firstChild.value;
	var text1=col[2].firstChild.value;
	col[0].innerHTML=text0;
	col[1].innerHTML=text;
	col[2].innerHTML=text1;
	col[3].lastChild.value="修改";
	col[3].lastChild.setAttribute("onclick","editOrder(this)");


}
</script>
</head>

<body>
<table border="1" id="order" cellspacing="0px">
<!-- <tr>
  	<td colspan="4">
  	<div id="myclock"></div></td>
 </tr> -->
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="del1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>500元</td>
    <td><input name="rowdelete"  type="button" value="删除" onclick='deleteOrder(this)' />
    <input id="edit1"  type="button" value="修改" onclick='editOrder(this)' /></td>
  </tr>
  <tr>
    <td>抗疲惫神奇钛项圈</td>
    <td>32</td>
    <td>￥76</td>
    <td><input type="button" value="删除" onclick='deleteOrder(this)' />
       <input type="button" value="修改" onclick='editOrder(this)'  />
   </td>
   </tr> 
  <tr>
    <input name="addOrder"  type="button" value="增加订单" onclick="addOrder()" /></td>
  </tr>

</table>
</body>
</html>
蘑菇酱酱
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Springboot后端代码（订单增删改查）
weixin_56743404的博客
12-13 876
Springboot后端代码（订单增删改查）
订单修改（增加订单，可删除和修改，删除订单，修改数量）
weixin_44239035的博客
04-14 8839
这只有js代码，css代码可自己设计内容，点击增加订单可增加一行订单，点击删除可删除订单，点击修改，可修改第二个单元格的内容，同时按钮变成确定，点击确定可成功修改内容同时按钮又变成修改。 <input type="button" value="增加订单" "addRow1()"> <script> //增加订单 function addRow1(){ ...
增加和删除订单
Tangayi的博客
07-17 1979
&lt;title&gt;增加和删除订单&lt;/title&gt; &lt;style type="text/css"&gt; body{ font-size:13px; line-height:25px; } table{ border-top: 1px solid #333; border-left: 1px solid #333; width:800px; } td{ bo...
完成订单列表 1. 完商品列表的“删除” 功能2. 完商品列表的“增加订单” 功能
YMYYZ的博客
04-27 223
1. 完商品列表的“删除” 功能 2. 完商品列表的“增加订单” 功能
订单删除，增加订单，巩固表单特定用法
u011927449的博客
05-28 387
方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { text-align: center; } </style> <script>
Java Web订单管理系统
01-22
Oracle9i,MVC模式，两张表。实现简单的增加，删除，修改和查询。代码简洁干净，注释清晰，层次分明
订单控制系统
08-06
简单的订单控制系统，实现数据的增加 ，删除，修改。还有订单开票时间，到款时间的提醒，以颜色来区分，并可以分类查询。本系统需要连接数据库。自己创建数据库，俩个表。具体的表项，可以在评论中问。
简单的php购物车代码
12-17
方法本质是：把session存入array，对array进行增加、删除、修改操作，array中的每一组记录都是一个商品的信息(个数，价格等)； 解决购物车的思路是用session记录一个二维数组。一维代表每一个商品，二维包含了商品的...
鑫路在线订单管理系统免费版V2.7(管理后台，邮件提醒，自动短信，导出excel)
08-13
20、 增加订单信息导出为excel，更方便地管理及维护订单数据； 21、 支持各短信系统发送(如106开头短信)，以便利用短信跟进客户售后服务，提高产品、网站形象及 提高付款成功率。 22、 专业版加入自动跟踪快递状态，...
鑫路在线竞价订单管理系统
01-27
20、增加订单信息导出为excel，更方便地管理及维护订单数据； 21、支持各短信系统发送(如106开头短信)，以便利用短信跟进客户售后服务，提高产品、网站形象及 提高付款成功率。 22、专业版加入自动跟踪快递状态，并...
JavaScript(订单的增删改)
m0_63300795的博客
04-08 1358
一，增加订单的方法 思路： 第一步：获取要操作的表格id 第二步：根据表格id开始增加行 并且要传插入到指定的下标 第三步：给新增行设置id 第四步：给新增行添加单元格 第五步：给单元格赋值 /* 增加订单方法 */ function f1(){ /* 要增加表格的编号 */ var a=document.getElementById("a"); /* 获取表格的总行数/最大下标 */ var c=a.rows.length-1; /* 增加行*/ var b=a.ins..
java实战应用：MyBatis实现单表的增删改
u014078192的专栏
06-12 1943
MyBatis 是支持普通 SQL查询，存储过程和高级映射的优秀持久层框架。MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis 使用简单的 XML或注解用于配置和原始映射，将接口和 Java 的POJOs（Plain Old Java Objects，普通的 Java对象）映射成数据库中的记录
JavaEE-SSM-订单管理-前端增删改功能实现
最新发布
qiuyeyyy的博客
01-23 1146
编写修改功能：先通过id查询详情，并回显到表单，修改内容后，提交表单。创建路由对应的vue页面。
js_06 表单案例
weixin_66616840的博客
04-10 515
文章目录1.表单增加功能2.表单删除功能3.表单修改功能4.表单确定功能 1.表单增加功能 获取要操作的表格。 开始增加行：增加的行的位置在表格的倒数第二行，下标：总行数-1。空行 获取表格行目前的最大下标 给新增加的行对象 newRow添加 id属性 往空行里面增加4个列 // 增加行 var myTable = document.getElementById("order"); function addRow(){ var row
JavaScript--增删改
m0_63223374的博客
04-10 1253
JavaScript--订单的删除和增加与修改
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3100
eed
js控制table增减行 （例如：订单添加删除商品）
听海Movie的专栏
11-11 5105
【html代码】 添加商品 编号 商品名称 单价 购买数量 小计 操作 product_id;?>" name="product_id[]">
开发平台之美：10分钟内实现一个销售订单功能的增删改查
明月清风
03-10 1763
企慧Q5 企业应用 快速开发平台
后台订单管理（增删改）
qq_45013032的博客
10-16 2709
在后台模板登录演示过相关步骤 第一步：在业务逻辑层写一个类继承BaseSerivces 第二步：在UI里的控制器（HomeController）写增删改方法 然后在Order(订单页面)写相关代码 首先先引入layui安装包 然后在页面引入js（layui） 然后： ...
帮我制作网上订单页面。 单击“增加订单”按钮,可增加订单 行，可自己输入商品名称、数 量和单价，如图 4-27 所示。 单击“确定”按钮后,保存订单，“确 定”按钮变为“修改”按钮,如 单击“删除”按安钮可删除一条订单。单击“修改”按钮，可对商品的名称、数量和单价进行修改。html，javascipt
06-02
这个页面中包含一个表格用于显示订单信息，两个按钮用于增加订单和保存订单，以及两个显示订单数量和总金额的区域。当用户点击“增加订单”按钮时，会调用JavaScript函数`addRow()`添加一行订单；当用户点击某一行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值