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）正通过公共标题进入。

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

我做错了什么？

Answer 1

而不是使用.html使用.replaceWith

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

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

Answer 2

span中间不能只有table。这是无效的HTML。您必须使用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>
<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>');
});

Answer 3

你想做的是

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

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

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

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

3 个答案: