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">代わりにjuseを使用してみません<span>か？

于 2013-01-23T00:49:37.150 に答える
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>');
});
于 2013-01-23T00:50:02.597 に答える
0

あなたがしたいことは

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

これにより、テーブルのtbodyが選択され、新しい行が最後に追加されます。

理想的には、テーブルにIDを追加して、ページ上のすべてのテーブルに新しい行を追加することにならないようにします。

于 2013-01-23T00:53:00.763 に答える