0

jQueryで作成した要素をテーブルに読み込もうとしています。問題は、この動的に作成された要素を別の要素 ( ) の後<th>に挿入して、表のデザインを維持する必要があることです。.after() を使用すると、要素がテーブルに挿入され、テーブルのデザインはきれいに見えますが、使用しているデータは、.before() を使用して挿入した場合とは逆の順序で表示されます。.before() / .after() で反対の動作が見られるのはなぜですか?

編集: . before() は金利の正しい挿入順序を示しますが、 の前に要素を挿入するため、テーブルの列/行が整列しません。.After() は金利の逆の挿入を提供しますが、要素はその後に追加されるため、テーブルはその行/列を保持します。

私の説明はおそらくあまり明確ではないので、ここに私のコードがあります：

<form id="form">        
    <label for="interestInput" id="interestRateLabel">Enter interest rate</label>
    <input id="interestInput" name="interestRate" type="text">
    <a href="#" id="addInput">Add another interest rate</a><br /><br />

    <label for="loanAmtInput" id="loanAmtLabel">Enter loan amount</label>
    <input id="loanAmtInput" name="loanAmt" type="text">

    <button onclick="doCalculation(); return false;">Calculate!</button>
</form>

<div id="standard">
    <h1>Standard Repayment</h1>
    <table width="600px;" border="1" cellspacing="0" cellpadding="0">
         <th scope="col">&nbsp;</th>
            <tr id="totalMonths">
               <th scope="row">Total months</th>
            </tr>
            <tr id="paymentPerMonth">
               <th scope="row">Payment/mo</th>
            </tr>
            <tr id="totalPayment">
               <th scope="row">Total payment</th>
            </tr>
    </table>
</div>  

<div id="extended">
    <h1>Extended Repayment</h1>
    <table width="600px;" border="1" cellspacing="0" cellpadding="0">
         <th scope="col">&nbsp;</th>
            <tr id="totalMonths">
               <th scope="row">Total months</th>
            </tr>
            <tr id="paymentPerMonth">
               <th scope="row">Payment/mo</th>
            </tr>
            <tr id="totalPayment">
               <th scope="row">Total payment</th>
            </tr>
    </table>
</div>

<div id="graduated">
    <h1>Graduated Repayment</h1>
    <table width="600px;" border="1" cellspacing="0" cellpadding="0">
         <th scope="col">&nbsp;</th>
            <tr id="totalMonths">
               <th scope="row">Total months</th>
            </tr>
            <tr id="paymentPerMonth">
               <th scope="row">Payment/mo</th>
            </tr>
            <tr id="totalPayment">
               <th scope="row">Total payment</th>
            </tr>
    </table>
</div>

そして、関連する JS は次のとおりです。

var doCalculation = function() {

$("div#standard table tbody th.rates, div#standard table tbody tr#totalMonths td, div#standard table tbody tr#paymentPerMonth td").remove();

var loanAmount = document.getElementById("loanAmtInput");

$("input[name=interestRate]").each(function(i){

    var num = parseInt( $(this).val(), 10 );
    var totalMonths = num * 3;
    var paymentPerMonth = num + (1/2);
    var totalPaymet = num * 120;

    console.log(i + "=" + num);

     $("div#standard table tbody th[scope=col]").before("<th class=rates>" + num + "% interest rate</th>");
     $("div#standard table tbody tr#totalMonths").append("<td>" + totalMonths + "</td>");
     $("div#standard table tbody tr#paymentPerMonth").append("<td>" + paymentPerMonth + "</td>");
});
};
4

2 に答える 2

1

JQueryはそれぞれを順番に実行するため、逆の順序になります。つまり、ある場合はbefore()各要素で実行され、別の場合は実行されafter()ます。実際に欲しいものを手に入れる方法は、から始めて<th>、つかんnext()で、それを実行before()することです。の後に要素がない（またはない可能性がある）場合は<th>、ダミー要素を作成して挿入しafter()、ダミー要素<th>を挿入する要素を挿入してからbefore()、ダミー要素を削除します。

于 2012-11-21T19:33:03.543 に答える
0

あなたの混乱がどこにあるかを私が理解しているなら、それは.before（）と.after（）が互いに反対に機能するからです。

jQuery APIドキュメントから：

.before（）-一致した要素のセット内の各要素の前に、パラメーターで指定されたコンテンツを挿入します。

.after（）-一致した要素のセット内の各要素の後に、パラメーターで指定されたコンテンツを挿入します。

詳細については、http：//api.jquery.com/をご覧ください。

于 2012-11-21T19:32:47.600 に答える