So! So far I'm doing fairly well as to what I want to do with an application, where you input a few sets of data, and it's sent to a table. I'm not sure, however, how to enable a little section that would allow me to edit/delete a single line.
Here is my HTML, if necessary ( the last two columns without labels will be the top to the edit/delete areas ):
- <table id="log" class="table table-striped" width="100%">
- <tr>
- <th width="15%">Customer Code</th>
- <th width="15%">Project Code</th>
- <th width="5%">Hours</th>
- <th width="55%">Description</th>
- <th width="5%"></th>
- <th></th>
- </tr>
- </table>
(Input for Customer Code and Project Code are in select pickers, and input for Hours and Description are input fields.)
And here is my jQuery:
- $(document).ready(function(){
- var tbody = $("#log");
- $('#submit').on('click', function (){
- tbody.append("<tr><td>" + $('#customer').val() + "</td><td>" + $('#project').val() + "</td><td>" + $('#hours').val() + "</td><td>" + $('#description').val() + "</td><td>Edit</td><td>Delete</td></tr>")
- });
- });
What I -want- to happen is that when delete is clicked (which I know should probably be replaced with jQuery, instead of hardcoding it into the HTML), the entire row it is associated with will disappear.
The more complicated bit is the edit button. I'd like it to not only delete the associated row--but before that even happens, the data inputed is grabbed and put back into the form, appropriately.
Even if anyone may not even show me word-for-word how to code it (though, it'd be absolutely great), a few steps would be much appreciated!
Thank you, all!
__________________________
EDIT:
I did some work, and was able to create the deletion method, but it only deletes the newest row in the table. It successfully deletes it, as expected!...But only the newest row (after each submission) is deleteable.
(Also, a minor change in the code is that the Delete and Edit areas were made into buttons.
- $(document).ready(function(){
- //Creation of new Row
- var tbody = $("#log");
- $('#submit').on('click', function (){
- tbody.append("<tr><td>" + $('#customer').val() + "</td><td>" + $('#project').val() + "</td><td>" + $('#numberhours').val() + "</td><td>" + $('#descriptionbar').val() + "</td><td><btn class='btn btn-small' id='edit'>Edit</btn></td><td><btn class='btn btn-small' id='delete'>Delete</btn></td></tr>")
- //Deletion of Line
- $('#delete').on('click', function (){
- $(this).parent().parent().remove();
- });
- });
- });