动态添加td

<%@ 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 onclick="deleteIntegral($(this))" class="delete">&nbsp;&nbsp;&nbsp;&nbsp;</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>

<tr>
<td colspan="2">

<table style="width:100%">
<tr>

<tr>
<th style="width: 50%; text-align: center;border:none;"><fmt:message key="product.detail.table.integrals" /></th>
<th style="width: 50%; text-align: center;border:none;"><fmt:message key="product.detail.table.prices" /></th>
</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" onclick="deleteIntegral($(this))">&nbsp;&nbsp;&nbsp;&nbsp;</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 class="buttonAdd">
<td colspan="2"
style="width: 60%; text-align: left; padding-left: 5px;border:none;">
<div class="button add">&nbsp;</div>
</td>
</tr>

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

时间： 2024-10-08 00:34:25

动态添加td的相关文章

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

js对select动态添加和删除OPTION

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

miniUI 动态添加table - JS

1.效果展示 ↓ 2.具体代码 1 <script type="text/javascript"> 2 function addRow() { 3 var form = document.getElementById("addForm"); 4 var table = document.getElementById("table_Records"); 5 var id_com = form.getElementsByTagName(&

动态添加HTML表单控件，无（runat=&quot;server&quot;）

JS部分<script> var allChildCount; //整个模块 allChildCount = 1; var sTxt = "<%=htmlselectName%>"; function addChildModel() { allChildCount++; var rown = filetb.rows.length; newRow = filetb.insertRow(rown); newRow.id = "mytdb" + a

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

Easy-UI 动态添加DataGrid的Toolbar按钮

在前人的基础上进行的修改,不知道他是从哪里引用来的,所以没有粘贴引用地址. 原代码不支持1.3.6. 修改功能: 1.如果之前没有添加过工具,用这个方法不能添加(已修复): 2.估计是不支持1.3.6,所以在1.3.6下不能删除按钮(已修复): 3.添加了在删除最有一个按钮后把按钮容器删除掉: 插件代码: $.extend($.fn.datagrid.methods, { addToolbarItem: function (jq, items) { return jq.each(function

table动态添加的tr 其click事件在IE兼容模式中不执行 jquery 1.9 的live事件 和获取 first last

http://www.css88.com/jqapi-1.9/first-of-type/index.html#p=//www.css88.com/jqapi-1.9/last-child-selector ---动态添加的table 的tr 给tr设定click事件 使用jquery 1.9 $(document).on("click", "#tableid tbody tr", function () { $("#tableid tbody"

jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算

jQuery可以计算的表单,包括单选改变价格,select改变价格,动态添加删除行计算 各种表单情况的计算 演示 JavaScript Code <script type="text/javascript"> var currentRow = 3; $(document).ready(function(){ $('#calx').calx(); $('#add_item').click(function(){ var $calx = $('#calx'); currentR

JS对select动态添加options操作[IE&amp;FireFox兼容]

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc