ToDo Lists App - Table: jQuery append() / after() /.parent().parent().remove() don't work propery or not recognized -
i'm following this, making to-do list stickynotes http://www.paulund.co.uk/create-sticky-notes-to-do-list-in-css-and-jquery
i need help. jquery code not work / not recognized browser. i'm trying insert new row when user clicks 'add new' button.
i pasted on jsfiddle: ** http://jsfiddle.net/rjjrt/ **
my jquery code:
$(document).ready(function(){ // add button click event $("#addnew").click(function(){ addnewrow(); }); }); // add new row when add task button clicked function addnewrow(){ var numrows = $('#tasktable tr').length; $('#tasktable').append(' <tr> <td><input type="text" id="title-'+numrows+'" placeholder="your task name"/></td> <td><input type="text" id="description-'+numrows+'" placeholder="task description"/></td> <td><input type="button" class="deletebutton" id="delete-'+numrows+'" title="delete task" value="delete" /></td> </tr> '); }
i tried
$('#tasktable tr:last').after(...
but didn't work either.
my html code:
<div class="around-table"> <table id="tasktable"> <tr> <th>task</th> <th>description</th> <th></th> </tr> <tr> <td><input type="text" id="title-1" placeholder="your task name"/></td> <td><input type="text" id="description-1" placeholder="task description"/></td> <td><input type="button" class="deletebutton" id="delete-1" title="delete task" value="delete" /></td> </tr> <tr> <td><input type="text" id="title-2" placeholder="your task name"/></td> <td><input type="text" id="description-2" placeholder="task description"/></td> <td><input type="button" class="deletebutton" id="delete-2" title="delete task" value="delete" /></td> </tr> </table> <input type="button" id="addnew" value="add task" /> </div>
thanks help.
---- after fixing ---- adding new row function works but, deleting row function not work newly added rows...
// function runs on page load $(document).ready(function(){ // add button click event $("#addnew").click(function(){ addnewrow(); }); // delete button click event $('.deletebutton').click(function(){ deleterow($(this)); }); }); // add new row when add task button clicked function addnewrow(){ var numrows = $('#tasktable tr').length; $('#tasktable tr:last').after('\ <tr>\ <td><input type="text" id="title-'+numrows+'" placeholder="your task name"/></td>\ <td><input type="text" id="description-'+numrows+'" placeholder="task description"/></td>\ <td><input type="button" class="deletebutton" id="delete-'+numrows+'" title="delete task" value="delete" /></td>\ </tr>\ '); } // delete grandparent of delete button // entire row of table (tr > td > a) function deleterow(button){ button.parent().parent().remove(); }
you can't have multiline strings in javascript without little trickery, code fail on line
$('#tasktable').append('
and nothing execute. can, however, have multiline strings if escape newline character backslash:
$('#tasktable').append(' \
just make sure backslash last character on line.
in case, though, build html in jquery instead:
$('#tasktable').append( $('<tr>').append($('<input>') .attr('type','text') .attr('id','title-'+numrows) .attr('placeholder','your task name') ).append($('<input>') .attr('type','text') .attr('id','description-'+numrows) .attr('placeholder','task description') ).append($('<input>') .attr('type','button') .attr('id', 'delete-'+numrows) .attr('title', 'delete task') .val('delete') .addclass('deletebutton) )) );