动态追加div，运用replace实现全部替换

最新推荐文章于 2022-06-01 15:31:44 发布

张伟灿

最新推荐文章于 2022-06-01 15:31:44 发布

阅读量3.1k

点赞数

分类专栏： JQuery 文章标签： div input include function button xhtml

本文链接：https://blog.csdn.net/flyfish778/article/details/6129206

版权

JQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<%@ include file="/common/global.jsp" %>
<%@ include file="/common/meta.jsp" %>
<script type="text/javascript">
  $(document).ready(function(){
  });
  /**
  *追加属性Div
  */
  var index = 0;   //全局属性对象下标定义处
  var addProperty = function(isDelete){
   var basePropertyDiv = $("#basePropertyDiv").html();

   //input name 再造
   var reg = new RegExp("//[//]","g"); //创建正则RegExp对象
   basePropertyDiv = basePropertyDiv.replace(reg,"[" + index + "]");
   index ++;

   var addPropertyObject = $("#addPropertyDiv");
   /**追加一个删除按钮**/
   basePropertyDiv = "<div>" + basePropertyDiv;
   if(isDelete == true){
    basePropertyDiv = basePropertyDiv + "<input type='button' name='deletePropertyButton' id='deletePropertyButton' value='删除' οnclick='deleteProperty(this)'/>";
   }
   basePropertyDiv = basePropertyDiv + "</div>";
   //alert(basePropertyDiv);
   addPropertyObject.append(basePropertyDiv);
  };
  /**
  *删除属性Div
  */
  var deleteProperty = function(obj){
   index --;
   if(index < 0){
    index = 0;
   }
   var parentDiv = $(obj).parent();
   parentDiv.remove();
  };
</script>
<body>
<%@ include file="/common/top.jsp" %>
<h1>添加订单</h1>
<form action="${ctx }/order!add.action" method="post">
  <table border=1 width=90%>
   <tr>
    <td>姓名</td>
    <td><input type="text" name="order.receiverName"></td>
    <td>电话</td>
    <td><input type="text" name="order.telphone"></td>
   </tr>
   <tr>
    <td>地址</td>
    <td colspan="3"><input type="text" name="order.address" style="width:400px;"></td>
   </tr>
  </table>
  <h2>订单详情</h2>
  <div id="addPropertyDiv"></div>
  <input type="button" name="addPropertyButton" id="addPropertyButton" value="追加属性" οnclick="addProperty(true);"/>

</form>

<div id="basePropertyDiv" style="display:none;">
  名称：<input type="text" name="orderItems[].goodsName"/>
  价格：<input type="text" name="orderItems[].price"/>
  数量：<input type="text" name="orderItems[].quantity"/>
</div>
<script type="text/javascript">addProperty(false);</script>
</body>
</html>

张伟灿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态追加div，运用replace实现全部替换

<br /><%@ page contentType="text/html;charset=UTF-8" language="java" %><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><ht
复制链接

扫一扫