1

免责声明：HTML、JQuery、Ajax 技能水平——垃圾。一直是个厚客户。

我有一个表格，允许用户输入客户代码和电子邮件地址。我想在客户代码有效时显示客户的姓名。我将通过 Ajax 和 Spring MVC 来实现这一点，但作为第一步，我想我会使用 jquery 函数在客户代码下的表中添加一行。但是，我无法让它工作。

这是我的 JSP：

<%@include file="/common/header.jsp" %>
<h1>
    <a href="/customerEmailList.do"><spring:message code="customer.email.title"/></a>
    <span class="breadcrumb"><spring:message code="ui.breadcrumb.separator"/></span>
    <spring:message code="action.add"/>
</h1>
<form:form action="customerEmailAdd.do" commandName="customerEmailEntry">
    <table>
        <tr>
            <td colspan="3"><form:errors cssClass="error"/></td>
        </tr>
        <tr>
            <td><spring:message code="customer.email.code"/> <span class="mandatory">*</span></td>
            <td><form:input id="customerCode" path="customerCode" maxlength="8" size="10"/></td>
            <td><form:errors path="customerCode" cssClass="error"/></td>
        </tr>
        <span id="identifiedCustomer">
        </span>
        <tr>
            <td><spring:message code="customer.email.edit.field"/> <span class="mandatory">*</span></td>
            <td><form:input path="emailAddress" maxlength="255" size="50"/></td>
            <td><form:errors path="emailAddress" cssClass="error"/></td>
        </tr>
        <tr>
            <td colspan="3">
                <hr/>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <input type="submit" class="green-button" value="<spring:message code="button.save"/>"/>
            </td>
        </tr>
    </table>
</form:form>

<script type="text/javascript">
    $ ( document ).ready ( function () {
        $ ( '#identifiedCustomer' ).html ( '<tr><td>Hello, world</td></tr>' );
    } );    
</script>

<%@include file="/common/footer.jsp" %>

jquery (1.8.3) 正在通过公共标头拉入。

当表单加载时，会显示文本Hello, world，但它不是新的表格行。它出现在桌子前面。我原以为它会在字段行customerCode和emailAddress字段行之间创建一个新行。

我做错了什么？

4

3 回答 3

3

而不是使用.html使用.replaceWith

.html更改跨度的内容，但不删除它们。表格中间的跨度和它自己的跨度<tr>是无效的。 .replaceWith将创建一个新元素并<span>从 DOM 中删除。

但是，根据 DOM 的结构方式，这可能会导致问题，因为跨度从无效点开始。为什么不直接使用<tr id="identifiedCustomer">而不是<span>？

于 2013-01-23T00:49:37.150 回答
2

你不能只在 aspan中间有 a table。那是无效的 HTML。您必须使用 atr代替：

<tr>
    <td><spring:message code="customer.email.code"/> <span class="mandatory">*</span></td>
    <td><form:input id="customerCode" path="customerCode" maxlength="8" size="10"/></td>
    <td><form:errors path="customerCode" cssClass="error"/></td>
</tr>
<tr id="identifiedCustomer"></tr>
<tr>
    <td><spring:message code="customer.email.edit.field"/> <span class="mandatory">*</span></td>
    <td><form:input path="emailAddress" maxlength="255" size="50"/></td>
    <td><form:errors path="emailAddress" cssClass="error"/></td>
</tr>

jQuery：

$(document).ready ( function () {
    $('#identifiedCustomer').html('<td>Hello, world</td>');
});
于 2013-01-23T00:50:02.597 回答
0

你想做的是

$('table tbody').append('<tr><td>Hello, world</td></tr>');

这将选择表的 tbody 并将新行附加到末尾。

理想情况下，您会向表中添加一个 ID，这样您就不会最终向页面上的每个表添加新行。

于 2013-01-23T00:53:00.763 回答