订单删除,增加订单,巩固表单特定用法

2024-06-19 22:48

本文主要是介绍订单删除,增加订单,巩固表单特定用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

方法一:

<!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);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);//设置idvar td0 = row.insertCell(0);//td0创建一个单元格
            td0.innerHTML = "好看耐用超耐磨沙发两件套";var td1 = row.insertCell(1);td1.innerHTML = row.rowIndex;var td2 = row.insertCell(2);//创建一个input按钮
            td2.innerHTML = '<input type="button" value="删除订单" onclick="delRow(\'' + 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')"></td></tr><tr><td colspan="3"><input type="button" value="增加订单" onclick="addrow()"></td></tr>
</table>
</body>
</html>

方法二:不同的地方就是input按钮的创建方法比较新颖

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {font: 13px/25px 宋体;}table {width: 360px;border-top: 1px solid #333;border-left: 1px solid #333;}tr {height: 30px;}table tr td {border-right: 1px solid #333;border-bottom: 1px solid #333;text-align: center;}</style><script type="text/javascript">function delRow(id) {//取得要删除的那一行var row = document.getElementById(id);var table = document.getElementById('mytable');table.deleteRow(row.rowIndex);}function addRow() {var table = document.getElementById('mytable');//要插入的位置var index = table.rows.length - 1;var row = table.insertRow(index);//只要知道行,可以知道其索引var td0 = row.insertCell(0);td0.innerHTML = '抗疲劳神奇钛项圈';var td1 = row.insertCell(1);td1.innerHTML = row.rowIndex;var td2 = row.insertCell(2);td2.innerHTML = '¥49.00';var td3 = row.insertCell(3);var input = document.createElement('input');input.setAttribute('type', 'button');input.setAttribute('value', '删除');input.onclick = function () {table.deleteRow(row.rowIndex);}td3.appendChild(input);}</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="mytable"><tr><td>商品名称</td><td>数量</td><td>价格</td><td>操作</td></tr><tr id="del1"><td>防滑真皮休闲鞋</td><td>12</td><td>¥568.50</td><td><input type="button" value="删除" onclick="delRow('del1')"></td></tr><tr><td colspan="4"><input type="button" value="增加订单" onclick="addRow()"></td></tr>
</table>
</body>
</html>

这篇关于订单删除,增加订单,巩固表单特定用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076371

相关文章

mapstruct中的@Mapper注解的基本用法

《mapstruct中的@Mapper注解的基本用法》在MapStruct中,@Mapper注解是核心注解之一,用于标记一个接口或抽象类为MapStruct的映射器(Mapper),本文给大家介绍ma... 目录1. 基本用法2. 常用属性3. 高级用法4. 注意事项5. 总结6. 编译异常处理在MapSt

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

java中long的一些常见用法

《java中long的一些常见用法》在Java中,long是一种基本数据类型,用于表示长整型数值,接下来通过本文给大家介绍java中long的一些常见用法,感兴趣的朋友一起看看吧... 在Java中,long是一种基本数据类型,用于表示长整型数值。它的取值范围比int更大,从-922337203685477

MyBatis ResultMap 的基本用法示例详解

《MyBatisResultMap的基本用法示例详解》在MyBatis中,resultMap用于定义数据库查询结果到Java对象属性的映射关系,本文给大家介绍MyBatisResultMap的基本... 目录MyBATis 中的 resultMap1. resultMap 的基本语法2. 简单的 resul

Python主动抛出异常的各种用法和场景分析

《Python主动抛出异常的各种用法和场景分析》在Python中,我们不仅可以捕获和处理异常,还可以主动抛出异常,也就是以类的方式自定义错误的类型和提示信息,这在编程中非常有用,下面我将详细解释主动抛... 目录一、为什么要主动抛出异常?二、基本语法:raise关键字基本示例三、raise的多种用法1. 抛

Redis过期删除机制与内存淘汰策略的解析指南

《Redis过期删除机制与内存淘汰策略的解析指南》在使用Redis构建缓存系统时,很多开发者只设置了EXPIRE但却忽略了背后Redis的过期删除机制与内存淘汰策略,下面小编就来和大家详细介绍一下... 目录1、简述2、Redis http://www.chinasem.cn的过期删除策略(Key Expir

java中Optional的核心用法和最佳实践

《java中Optional的核心用法和最佳实践》Java8中Optional用于处理可能为null的值,减少空指针异常,:本文主要介绍java中Optional核心用法和最佳实践的相关资料,文中... 目录前言1. 创建 Optional 对象1.1 常规创建方式2. 访问 Optional 中的值2.1

git stash命令基本用法详解

《gitstash命令基本用法详解》gitstash是Git中一个非常有用的命令,它可以临时保存当前工作区的修改,让你可以切换到其他分支或者处理其他任务,而不需要提交这些还未完成的修改,这篇文章主要... 目录一、基本用法1. 保存当前修改(包括暂存区和工作区的内容)2. 查看保存了哪些 stash3. 恢

Python struct.unpack() 用法及常见错误详解

《Pythonstruct.unpack()用法及常见错误详解》struct.unpack()是Python中用于将二进制数据(字节序列)解析为Python数据类型的函数,通常与struct.pa... 目录一、函数语法二、格式字符串详解三、使用示例示例 1:解析整数和浮点数示例 2:解析字符串示例 3:解

C++/类与对象/默认成员函数@构造函数的用法

《C++/类与对象/默认成员函数@构造函数的用法》:本文主要介绍C++/类与对象/默认成员函数@构造函数的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录名词概念默认成员函数构造函数概念函数特征显示构造函数隐式构造函数总结名词概念默认构造函数:不用传参就可以