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


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -