html - Creating a new table row and data cell with text from an input tag on button click JQuery -
hi want create similar cart whenever user clicks on button called "add" use case: every time user inputs expense amount, date, , payment description, selects add, want append row cart table information.
<body> <div id="outerbox"> <fieldset id="tablecontainer"> <legend>create 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> jquery far 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 put input value text fields in inner html of <td>? }); }); my main question how pull input field value first table , add contents innerhtml of of data cells in bucket table?
thanks!
since td have id's, should able this: (i'm not sure how apex controls work, correct if not proper way pull value out):
$('#buckettable tbody').append('<tr><td>' + $("#amt").children().val() + '</td><td>' + $("#duedate").children().val() + '</td><td>' + $("#duedate2").children().val() + '</td></tr>'); also, duedate id there twice, cause errors. change that! (in code above, made duedate2)
Comments
Post a Comment