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 ...

随机推荐

bootstrap环境
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
Saber-图集
PS:狙击手
easy-rules
我们在写业务代码经常遇到需要一大堆if/else,会导致代码可读性大大降低,有没有一种方法可以避免代码中出现大量的判断语句呢?答案是用规则引擎,但是传统的规则引擎都比较重,比如开源的Drools,不适 ...
解决tomcat控制台乱码问题
问题原因:编码不一致,tomcat启动后默认编码UTF-8,而windows的默认编码是GBK.所以只需配置启动tomcat后为GBK编码即可. 做法:找到路径 $xxx$\apache-tomcat ...
NUMPY的学习之路（2）——索引，合并，分割，赋值
一.索引 1.1numpy数组的转置 A=np.arange(3,15).reshape(3,4) print(A) print(A[2][0]) print(A[2,1]) print(A[2,:] ...
OBS_Classic经典版框架
一,简介 OBS(open boardcast server),是一个用于直播的开源软件. 官方网站:https://obsproject.com/ 代码托管地址:https://github.com ...
服务器部署网站后，公网ip可以访问，域名不能访问问题（稳）
出现问题这几天我网站已经部署到vps上,域名也备好案,想使用域名指向我们公网ip.指完发现用域名访问不了网站,但是公网ip可以.于是看了网上资料,好像是要清除浏览器DNS缓存,我清完没用.然后发现我 ...
ios开源
a http://code.cocoachina.com b http://code4app.com c http://www.oschina.net/ios/codingList/ d github ...
springboot 框架 - helloword
功能:浏览器发送hello请求,服务器接收请求并处理,返回hello word字符串一.创建一个maven项目二.在pom.xml文件中添加依赖导入springboot框架运行需要的依赖 < ...
Truffle 快速构建 DApp
简单介绍官网传送门 Truffle是针对基于以太坊的Solidity语言的一套开发框架.本身基于Javascript,使用以太坊虚拟机(EVM)的世界一流的开发环境,用于区块链的测试框架和资产管道 ...

JS动态添加删除html

JS动态添加删除html的更多相关文章

随机推荐

热门专题