<div id="table">
<table border="1" bordercolor="black" cellspacing="0" align="center" cellpadding="5">
<thead>
<tr>
<td>
</td>
<td>
产品编号
</td>
<td>
产品名称
</td>
<td>
产品描述
</td>
<td>
父类名称
</td>
<td>
增加子类别
</td>
<td>
编辑
</td>
<td>
删除
</td>
</tr>
</thead>
<c:forEach items="${pageBean.queryResult.resultList}" var="productType">
<tr class="productName">
<td class="parentTypeId">
<c:if test="${!empty productType.parentType}">
<input type="hidden" value="${productType.parentType.id}" />
</c:if>
</td>
<td class="productTypeId">
${productType.id }
</td>
<td class="productTypeName">
${productType.name }
</td>
<td>
${productType.note }
</td>
<td class="parentTypeName">
<c:if test="${!empty productType.parentType}">${productType.parentType.name}</c:if>
</td>
<td>
<input name="#add" type="button" value="添加"></input>
</td>
<td>
<input name="#update" type="button" value="编辑" />
</td>
<td>
<input name="#delete" type="button" value="删除" />
<%--<a name="deleteProductType" href="controller/product/productType!deleteProductType.action?productType.id=${productType.id} ">删除</a>
--%>
</td>
</tr>
</c:forEach>
</table>
</div>
点击“编辑”按钮,触发事件,执行一下代码:
$('input[name=#update]').click(function(e) { var parentTypeId = $(this).parent().parent().children(".parentTypeId") .children().attr("value"); var currentElement = $(this).parent().parent() .children(".parentTypeName"); var parentTypeName = currentElement.html(); var name = currentElement.prev().text(); var note = currentElement.prev().prev().text(); $('#productTypeName').val(name); $("#productTypeNote").val(note); alert($("#productTypeNote").attr("value")); var id = $(this).attr('name'); location(id); $(id).fadeIn(2000); $.ajax({ type : "post", dataType : "json", url : "controller/product/productType!getIdAndName.action", success : function(data, textStatus) { var select = $("select[name=select]"); var option = ""; // var parentTypeName = $(this).parent().parent() // .children(".parentTypeId").html(); // alert(parentTypeName); // var productType = eval("(" + data + ")"); option += "<option value=\"" + parentTypeId + "\">" + parentTypeName + "</option>"; for (var i = 0; i < data.result; i++) { option += "<option value=\"" + data.rows[i].productId + "\">" + data.rows[i].productTypeName + "</option>"; } select.html(option); }, complete : function(XMLHttpRequest, textStatus) { // HideLoading(); // alert("complete"); }, error : function() { alert("error"); } }); });
浏览器弹出这个层;
<div id="update" class="window">
<img class="close" alt="close" src="/sports/images/greenAcross.gif">
<form name="updateProductType" action="controller/product/productType!updateProductType.action" method="post">
<table>
<caption>
修改产品子类型
</caption>
<tr>
<td>
产品父类型:
</td>
<td>
<select name="select">
</select>
</td>
</tr>
<tr>
<td>
产品类型名称:
</td>
<td>
<input id="productTypeName" value="aa" type="hidden" name="productType.name">
</td>
</tr>
<tr>
<td>
产品类型备注:
</td>
<td>
<input id="productTypeNote" value="bb" type="hidden" name="productType.note">
</td>
</tr>
<tr>
<td>
<br />
<input type="submit" name="" value="submit">
</td>
<td>
<br />
<input type="reset" name="" value="reset">
</td>
</tr>
</table>
</form>
</div>
此时<input id="productTypeName" value="aa" type="hidden" name="productType.name">和
<input id="productTypeNote" value="bb" type="hidden" name="productType.note">的值都有重新赋值,看图
jquery2.jpg,但我希望这两个input都是可以编辑的,所以他们的type应该是“text”,只是如果改成“text”的话,那么上面的js赋值代码就没有成功执行,也就是说他们的值依旧是“aa”和“bb”。这个是什么原因呢?如下和图jquery3.jpg
<div id="update" class="window">
<img class="close" alt="close" src="/sports/images/greenAcross.gif">
<form name="updateProductType" action="controller/product/productType!updateProductType.action" method="post">
<table>
<caption>
修改产品子类型
</caption>
<tr>
<td>
产品父类型:
</td>
<td>
<select name="select">
</select>
</td>
</tr>
<tr>
<td>
产品类型名称:
</td>
<td>
<input id="productTypeName" value="aa" type="text" name="productType.name">
</td>
</tr>
<tr>
<td>
产品类型备注:
</td>
<td>
<input id="productTypeNote" value="bb" type="text" name="productType.note">
</td>
</tr>
<tr>
<td>
<br />
<input type="submit" name="" value="submit">
</td>
<td>
<br />
<input type="reset" name="" value="reset">
</td>
</tr>
</table>
</form>
</div>