使用按钮上的输入标记中的文本创建新的表行和数据单元格，单击JQuery_Jquery_Html

使用按钮上的输入标记中的文本创建新的表行和数据单元格，单击JQuery

jquery html

使用按钮上的输入标记中的文本创建新的表行和数据单元格，单击JQuery,jquery,html,Jquery,Html,嗨，我想创建一个类似于购物车的东西，只要用户点击一个叫做“添加”的按钮用例：每当用户输入费用金额、日期和付款说明，然后选择add时，我想在购物车表中添加一行信息 <body> <div id="outerBox"> <fieldset id="tableContainer"> <legend>Create A New Expense</legend> <ta

嗨，我想创建一个类似于购物车的东西，只要用户点击一个叫做“添加”的按钮用例：每当用户输入费用金额、日期和付款说明，然后选择add时，我想在购物车表中添加一行信息

<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>?
    });
});


创建新的费用
应付金额
到期日
定期月费？
由于您的td
都有ID，因此您应该能够做到这一点：（我不确定apex
控件如何工作，如果这不是提取值的正确方法，有人会纠正）：
$（“#bucketTable tbody”）.append（'+$（“#amt”）.children（）.val（）+'+$（“#dueDate”）.children（）.val（）+'+'+$（“#duedet2”）.children（）.val（）+''；

此外，您的dueDate
ID存在两次，这将导致错误。改变这个！（在上面的代码中，我制作了dueDate2
）
这是小提琴：
将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() );
    });
});

$（文档）.ready（函数（）{
$（'#添加'）。单击（函数（）{
$（'picContainer'）.fadeIn（“慢”）；
$（'桶'）.fadeIn（“慢”）；
$（“#bucketTable tbody”）。附加（“”）；
//如何将文本字段中的输入值放入的内部html中？
$（“#hd duedate”）.text（$（“#duedate”）.children（）.val（））；
$（“#hd desc”）.text（$（“#desc”）.children（）.val（））；
$（“#hd amt”）.text（$（“#amt”）.children（）.val（））；
});
});
你能做一把小提琴吗？感谢您的回复，除了apex输入字段有一个小改动外，一切都正常。我将ID移到输入字段而不是数据单元格。我没有使用#amt“[id$=amt]”，而是感谢您帮助我找到解决方案！啊，很好。很高兴我能帮忙。
$(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() );
    });
});