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

yuanfen860913

浏览: 115403 次
性别:
来自: 深圳

最近访客更多访客>>

jveqi

aa283818932

wangyy

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (137)

社区版块

存档分类

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

JSP JavaScript XHTML HTML

<%@ 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='删除' onclick='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="追加属性" onclick="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>

分享到：