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

由于你们td所有人都有 ID，因此您应该能够做到这一点：（我不确定apex控件是如何工作的，如果这不是提取值的正确方法，请有人纠正）：

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

此外，您的dueDateID 存在两次，这将导致错误。改变那个！（在上面的代码中，我做到了dueDate2）

于 2013-05-10T16:19:54.243 回答
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 回答