0

こんにちは、ユーザーが「追加」というボタンをクリックするたびに、カートに似たものを作成したいと考えています。情報を含むカート テーブルに行を追加します。

<body>
    <div id="outerBox">
        <fieldset id="tableContainer">
            <legend>Create A New Expense</legend>
            <table id="expTable">
                <thead>
                    <tr>
                        <th>Amount Due</th>
                        <th>Due Date</th>
                        <th>Recurring Monthly Charge?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="amt"><apex:InputField value="{!Expense__c.Payment_Amount__c}"/></td>
                        <td id="dueDate"><apex:InputField value="{!Expense__c.Description__c}"/></td>
                        <td id="dueDate"><apex:InputField value="{!Expense__c.Next_Due_Date__c}"/
</td>
                        <td><apex:InputField value="{!Expense__c.Recurring_Monthly_Bill__c}"/></td>
                    </tr>
                </tbody>
            </table>

            <div id="add">Add</div>
        </fieldset>
    </div>
    <div id="bucket">
        <fieldset id="bucketContainter">
            <legend>Added Expenses</legend>
            <table id="bucketTable" cellspacing="5px" width="400px">
                <thead>
                    <tr>
                        <th>Due Date</th>
                        <th>Description</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </fieldset>
    </div>
    <div id="picContainer">
        <apex:image styleClass="hatchet" value="{!$Resource.hatchet}"/>
    </div>
</body>

For the JQuery so far I have
$(document).ready(function(){
$('#add').click(function(){

        $('#picContainer').fadeIn("slow");
        $('#bucket').fadeIn("slow");
        $('#bucketTable tbody').append('<tr><td></td><td></td><td></td></tr>');
       //How do I put the input value from the text fields in the inner html of the <td>?
    });
});

私の主な質問は、最初のテーブルから入力フィールドの値を取得し、その内容をバケット テーブルのデータ セルの innerHTML に追加する方法です。

ありがとう！

4

2 に答える 2

0

ここにフィドルがあります：http://jsfiddle.net/fpgT2/1/

次のように、html で重複する「dueDate」ID を「desc」を使用するように変更します。

<td id="amt"><apex:InputField value="{!Expense__c.Payment_Amount__c}"/></td>
<td id="desc"><apex:InputField value="{!Expense__c.Description__c}"/></td>
<td id="dueDate"><apex:InputField value="{!Expense__c.Next_Due_Date__c}"/></td>

jquery:

$(document).ready(function(){
$('#add').click(function(){

        $('#picContainer').fadeIn("slow");
        $('#bucket').fadeIn("slow");
        $('#bucketTable tbody').append('<tr><td id="hd-duedate"></td><td id="hd-desc"></td><td id="hd-amt"></td></tr>');
       //How do I put the input value from the text fields in the inner html of the <td>?

        $("#hd-duedate").text( $("#duedate").children().val() );
        $("#hd-desc").text( $("#desc").children().val() );
        $("#hd-amt").text( $("#amt").children().val() );
    });
});
于 2013-05-10T16:27:16.470 に答える
0

あなたのtdすべてがIDを持っているので、これを行うことができるはずです:(apexコントロールがどのように機能するかわかりません。これが値を引き出す適切な方法でない場合は誰かが修正してください):

$('#bucketTable tbody').append('<tr><td>' + $("#amt").children().val() + '</td><td>' + $("#dueDate").children().val() + '</td><td>' + $("#dueDate2").children().val() + '</td></tr>');

また、dueDateID が 2 回あるため、エラーが発生します。それを変更してください！（上記のコードでは、私が作成しましたdueDate2）

于 2013-05-10T16:19:54.243 に答える