动态添加td

最新推荐文章于 2022-03-27 16:34:43 发布

dianji4156

最新推荐文章于 2022-03-27 16:34:43 发布

阅读量270

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yaoyao66123/p/4596874.html

版权

<%@ include file="/common/taglibs.jsp" %>
<head>
<title><fmt:message key="product.detail.title"/></title>
<meta name="heading" content="<fmt:message key='product.detail.heading'/>"/>
<meta name="menu" content="ProductBgListMenu"/>
<style>
.button.add {
background: url("${ctx}/styles/images/product/icon-add.png") no-repeat center;
border: 2px dotted;
width: 59%;
text-align: center;
margin: 0 auto;
}

/* .button.add:hover {
background: url("${ctx}/styles/images/product/icon-add.png") no-repeat center;
border: 2px dotted;
width: 59%;
}*/

.delete {
background: url("${ctx}/styles/images/product/icon-delete.png") no-repeat left center;
cursor: pointer;
margin-left: 20px;
}

</style>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jquery.imgMagnifier.js' />"></script>
<script type="text/javascript">

$(document).ready(function () {
$("input[name='product.enddate']", "#productListDetail").calendarpicker(false);
$("#productListDetailSaveBtn").bind("click", function () {

$("#productListDetailForm").ajaxSubmit({
url: "<c:url value='/creative/product/updateDetail' />",
type: 'post',
success: function (data) {
$("#productListDetailCancelBtn").trigger("click");
$("#productListSearchBtn", "#productListSearch").trigger("click");
}
});
});
$("#productListDetailCancelBtn").bind("click", function () {
$(this).parents("div[dialogContent='dialogContent']:last").dialog("close");
});
// 查看已上传图片
$("a.readImgPreview").ImgRead();

$('.button.add').on('click', function () {
var $integralHtmlObj = $(".relatedIntegral:first").clone();

/*找到最后一个td 添加css 属性*/
$integralHtmlObj.find("input:last").css('margin-left','11%');
$integralHtmlObj.find("td:last").append('<span οnclick="deleteIntegral($(this))" class="delete">    </span>');

$('.button.add').parents(".buttonAdd").before($integralHtmlObj);
var els = document.getElementsByName("productIntegrals").length;
document.getElementsByName("productIntegrals")[els - 1].value = '';
var els = document.getElementsByName("productPrices").length;
document.getElementsByName("productPrices")[els - 1].value = '';
});

});

function deleteIntegral(obj) {
obj.parent().parent().remove();
}
</script>

</head>
<div class="pagecommlayout" style="position: absolute; text-align: right;" id="productListDetail">
<div class="pagecommlayoutright" style="left: 0;">
<div class="pagecommcenter" style="top: 0; bottom: 38px;text-align: center;">
<form id="productListDetailForm" enctype="multipart/form-data" method="post">
<input name="product.uuid" value="${product.uuid }" type="hidden"/>
<table class="formTable" style="line-height: 25px;" cellSpacing=0 cellPadding=3>
<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.name"/> :</td>
<td style="width: 60%; text-align: left; padding-left: 5px;"><input name="product.name"
value="${product.name }"/><span
style="color: #ff0000;">*</span></td>
</tr>
<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.integral"/>
:
</td>
<td style="width: 60%; text-align: left; padding-left: 5px;"><input name="product.integral"
maxlength="10"
class="myNumberFormat"
value="${product.integral }"/><span
style="color: #ff0000;">*</span></td>
</tr>
<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.enddate"/> :
</td>
<td style="width: 60%; text-align: left; padding-left: 5px;"><input name="product.enddate"
readonly="readonly"
value="${product.enddate }"/><span
style="color: #ff0000;">*</span></td>
</tr>

<c:choose>
<c:when test="${fn:length(product.productExchangeDetailses) > 0}">
<c:forEach var="p" items="${product.productExchangeDetailses}" varStatus="idx">
<tr class="relatedIntegral">
<td style="width: 50%; text-align: center;border:none;"><input
name="productIntegrals" value="${p.point}"
maxlength="10" class="myNumberFormat"/></td>
<td style="width: 50%; text-align: center;border:none; "><input
name="productPrices" value="${p.price}" style="<c:if test='${idx.index != 0 }'>margin-left:11%</c:if>"
maxlength="10" class="myNumberFormat"/><c:if test="${idx.index != 0 }" ><span class="delete" οnclick="deleteIntegral($(this))">    </span></c:if></td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr class="relatedIntegral">
<td style="width: 50%; text-align: center;border:none;"><input
name="productIntegrals"
maxlength="10" class="myNumberFormat"/></td>
<td style="width: 50%; text-align: center;border:none;"><input
name="productPrices"
maxlength="10" class="myNumberFormat"/></td>
</tr>
</c:otherwise>
</c:choose>

</tr>

</table>

</td>
</tr>

<%--price--%>

<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.publishnum"/>
:
</td>
<td style="width: 60%; text-align: left; padding-left: 5px;"><input name="product.publishnum"
maxlength="10"
class="myNumberFormat"
value="${product.publishnum }"/><span
style="color: #ff0000;">*</span></td>
</tr>
<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.attachment"/>
:
</td>
<td style="width: 60%; text-align: left; padding-left: 5px;">
<input type="file" class="textfocus" style="width: auto;" name="fileModel.file"/>
<c:if test="${not empty product.bigImgPath }">
<a class="readImgPreview" href="javascript:void(0);"
readPath="<c:url value='${product.bigImgPath }' />"><fmt:message
key="button.read"/></a>
</c:if>
</td>
</tr>
<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.content"/> :
</td>
<td style="width: 60%; text-align: left; padding-left: 5px;">
<textarea name="product.content" class="textarea" rows="5"
cols="35">${product.content }</textarea></td>
</tr>
<tr>
<td style="width: 40%; text-align: right;"><fmt:message key="product.detail.table.remark"/> :
</td>
<td style="width: 60%; text-align: left; padding-left: 5px;">
<textarea name="product.remark" class="textarea" rows="5"
cols="35">${product.remark }</textarea></td>
</tr>
</table>
</form>
</div>
<div class="pagecommbottom" style="bottom: 0px;text-align: right;">
<a id="productListDetailSaveBtn" class="btn_gray" href="javascript:void(0);"><fmt:message
key="button.submit"/></a>
<a id="productListDetailCancelBtn" class="btn_gray" href="javascript:void(0);"><fmt:message
key="button.cancel"/></a>
</div>
</div>
</div>