jquery - 使用jquery将<span> html更改为<tr>...</tr>

Question

免责声明: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) 正在通过公共(public) header 引入。

加载表单时，会显示文本Hello, world，但它不是新的表行。它出现在 table 前面。我希望它在 customerCode 和 emailAddress 字段行之间创建一个新行。

我做错了什么？

Answer 1

而不是使用 .html使用.replaceWith

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

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