JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下：
下面是jsp页面代码
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="m" uri="/my-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/coder" prefix="coder"%> <%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport"> <title>店铺设置</title>
<%@include file="/res/funcanteen/businessheadinclude.jsp"%>
<link rel="stylesheet" href="<%=basePath%>res/funcanteen/css/jquery-weui.css"> <script type="text/javascript" src="<%=basePath%>res/funcanteen/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>res/funcanteen/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>res/funcanteen/js/jquery-weui.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head> <body>
<form id="form" action="" method="post">
<input type="hidden" id="stallId" name="stallId" value="${stallId }">
<input type="hidden" id="timeType" name="timeType" value="${timeType }"> <div id="box">
<!--头部-->
<div class="header">
<a href="<%=basePath%>book/business/version2/store?stallId=${stallId}" class="back"></a>营业时间
</div>
<!--中间内容区域-->
<div class="store_cent" style="">
<ul class="have_int">
<ul class="time_dtn" id="afternoonTeaScanTime">
<li style="border-top:1px solid #c9c9c9;">
<div class="date all_activity">
<c:choose>
<c:when test="${businessList !=null && businessList.size() >0}">
<c:forEach items="${businessList }" var="business" begin="0" varStatus="status">
<c:set var="num" value="${status.count-1}"></c:set>
<input type="hidden" value="${business.id }" name="stallTimeList[${num}].id">
<input type="hidden" value="${business.stallId }" name="stallTimeList[${num}].stallId"> <div class="activity_class">
<span class="set_leftd" style="width: 10%;"><img src="<%=basePath%>res/funcanteen/images/Business/list_bg12.png" alt=""></span>
<div class="set_rightd" style="width: 90%;">
<input type="text" readOnly="true" style="width: 38%;" id="stallTimeList[${num}].start" name="stallTimeList[${num}].start" value="${business.start }" class="business stallTime_start">
<span style="width: 5%;">至</span>
<input type="text" readOnly="true" style="width: 38%;" id="stallTimeList[${num}].end" name="stallTimeList[${num}].end" value="${business.end }" class="business stallTime_end">
<div class="dell_all" stallTimeId="${business.id }">
<span style="width: 10%;" class="title_name dell_coupon">删除</span><span style="width: 7%;" class="konck_icon konck_i"></span>
</div>
</div>
</div>
</c:forEach>
</c:when>
<c:otherwise>
<div class="activity_class">
<span class="set_leftd" style="width: 10%;"><img src="<%=basePath%>res/funcanteen/images/Business/list_bg12.png" alt=""></span>
<div class="set_rightd" style="width: 90%;">
<input type="text" readOnly="true" style="width: 38%;" id="stallTimeList[0].start" name="stallTimeList[0].start" value="" class="business stallTime_start">
<span style="width: 5%;">至</span>
<input type="text" readOnly="true" style="width: 38%;" id="stallTimeList[0].end" name="stallTimeList[0].end"value="" class="business stallTime_end">
<div class="dell_all" >
<span style="width: 10%;" class="title_name dell_coupon">删除</span><span style="width: 7%;" class="konck_icon konck_i"></span>
</div>
</div>
</div>
</c:otherwise>
</c:choose>
</div>
<div class="activity_add" style="float: right;">
<span class="title_name add_coupon">添加时间</span>
<span class="konck_icon konck_h"></span>
</div>
</li>
</ul>
</ul>
</div>
<!--底部-->
<div class="store_d">
<button type="button" id="subUpdate">保存</button>
</div>
</div>
</form>
<script>
$(function(){
$("#subUpdate").click(function() {
//判断所有的时间必须填
var flag=false;//判断配置时间必须填
var dateSize=false;//判断开始时间不能大于结束时间
$(".activity_class").each(function (){
var start = $(this).find(".stallTime_start").val();
var end = $(this).find(".stallTime_end").val();
if(start==null || start==""){
flag=true;
return false;
}
if(end==null || end==""){
flag=true;
return false;
}
if(start >= end){
dateSize=true;
return false;
}
});
if(flag){
alert('配置时间必须填');
return;
}
if(dateSize){
alert("开始时间不能大于结束时间");
return;
}
$.ajax({
url : "<%=basePath %>book/business/version2/store!saveUpdateStallTime",
data : $("#form").serialize(),
type : "POST",
success : function(data) {
if(data.success){
window.location.reload()
}
}
});
});
})
</script>
<script>
$(function(){
$(".set_rightd input[type='text']").picker({
title: "设置时间",
cols: [
{
textAlign: 'right',
values: (function () {
var hours = [];
for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
return hours;
})()
},
{
textAlign: 'center',
values: [':']
},
{
textAlign: 'left',
values: (function () {
var minutes = [];
for (var i=0; i<60; i++) minutes.push(i > 9 ? i : '0'+i);
return minutes;
})()
}
]
});
//删除营业时间配置
$('.dell_coupon').click(function(){
delFcuk(this);
});
}); var delFcuk = function(obj){
var stallTimeId = $(obj).parent().attr("stallTimeId");
var stallId = $("#stallId").val();
if(stallTimeId !=null && stallTimeId !=""){
//删除方法
$.ajax({
url : "<%=basePath %>book/business/version2/store!deleteStallTimeById",
type : "post",
data : {
"stallTimeId" : stallTimeId,
"stallId" : stallId
},
success : function(data){
if(data.success){
window.location.reload();
}
}
});
}
$(obj).parent().parent().parent().remove();
sort();//排序方法
}
//点击“加”事件
$(".activity_add").click(function(e){
addFullSubtract();
setDate();
sort();
});
//动态添加营业时间配置
function addFullSubtract(){
var imagePath='<%=basePath%>res/funcanteen/images/Business/list_bg12.png';
var fullSubtract=$('<div class="activity_class">'
+ '<span class="set_leftd" style="width: 10%;"><img src='+imagePath+' alt=""></span>'
+ '<div class="set_rightd" style="width: 90%;">'
+ '<input type="text" readOnly="true" style="width: 38%;" value="" class="business stallTime_start">'
+ '<span style="width: 5%;">至</span>'
+ '<input type="text" readOnly="true" style="width: 38%;" value="" class="business stallTime_end">'
+ '<div class="dell_all" stallTimeId="">'
+ '<span style="width: 10%;" class="title_name dell_coupon">删除</span><span style="width: 7%;" class="konck_icon konck_i"></span>'
+ '</div>'
+ '</div>'
+'</div>');
$(".all_activity").append(fullSubtract);
console.log(fullSubtract.find(".dell_coupon")[0]);
fullSubtract.find(".dell_coupon").click(function(){
delFcuk(this);
});
}
//让动态生成时间后能有效
function setDate(){
$(".set_rightd input[type='text']").picker({
title: "设置时间",
cols: [
{
textAlign: 'right',
values: (function () {
var hours = [];
for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
return hours;
})()
},
{
textAlign: 'center',
values: [':']
},
{
textAlign: 'left',
values: (function () {
var minutes = [];
for (var i=0; i<60; i++) minutes.push(i > 9 ? i : '0'+i);
return minutes;
})()
}
]
});
}
//排序
var sort = function(){
$(".activity_class").each(function(i){
$(this).find(".stallTime_start").attr("name","stallTimeList["+i+"].start");
$(this).find(".stallTime_end").attr("name","stallTimeList["+i+"].end");
});
}
</script>
</body>
</html>
JS动态添加删除html的更多相关文章
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- js实现网页收藏功能，动态添加删除网址
<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...
- 编辑 Ext 表格（一）——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
随机推荐
- C++四种初始化方式
1. 直接初始化直接调用与实参匹配的构造函数,形式如“T t(u)”.2. 拷贝初始化:复制初始化首先使用指定构造函数创建一个临时对象,然后用复制构造函数将那个临时对象复制到正在创建的对象”,形式如“ ...
- Redis06——Redis五大数据类型 list
list 单键多值 Redis列表是简单的字符串列表,按照插入顺序排序,可以添加左边/右边 底层实际上是一个双向链表,对两端的操作性能好,但是通过索引下标的操作中间节点性能较差 lpush/rpus ...
- 神经网路的层数，损失函数（loss）
神经网络的复杂度:可用神经网络的层数和神经网络中待优化参数个数表示 神经网路的层数:一般不计入输入层,层数 = n 个隐藏层 + 1 个输出层 神经网路待优化的参数:神经网络中所有参数 w 的个数 + ...
- sql 中联合查询语句
在查询语句中 两张表进行查询,可以通过 left join (左连接查询) :返回左表中的所有记录和右表中联结字段相等的记录 (意思就是左表中的数据会全部显示,右表中只会显示和左表中相等的字段) r ...
- JetBrains PyCharm 2018.2.1 x64永久激活码
812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlT ...
- HDU2121 Ice_cream’s world II （最小树形图）
在建图的时候对原图进行加边 建立一个超级源点~ #include<cstdio> #include<algorithm> #include<cstring> usi ...
- springboot @ComponentScan注解
@ComponentScan 告诉Spring从哪里找到bean. 如果你的其他包都在@SpringBootApplication注解的启动类所在的包及其下级包,则你什么都不用做,SpringBoot ...
- [lua]紫猫lua教程-命令宝典-L1-01-05. if判断结构
L1[if]01. 简单的if判断结构 没什么说得 if得基本结构如下 xxx= ) then testlib.traceprint("1-100") ) then testlib ...
- eclipse的版本代号
mars为4.5版本号 代号 代号名 发布日期Eclipse 3.1 IO 木卫一,伊奥 2005Eclipse 3.2 Callisto 木卫四,卡里斯托 2006Eclipse 3.3 Europ ...
- django ForeignKey ManyToMany 前后端联动
总结 外键基本和普通的字段是一样的 多对多 获取 getlist() 更新 clear() add() remove() 前端和后端是通过字符串沟通的,所以使用ajax的时候如果是数据类型,记得要JS ...