jQuery addClass example

Change class name on click in jQuery

by conditg

HTML

<table id='exptable'>
<tr>
  <td>(date)</td>
  <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
  <td><input type='number' value='.00'/></td>
  <td><input type='button' class='addrow' value='Add Row Below'/></td>
  <td><input type='button' class='delrow' value='Delete' /></td>
</tr>
<tr>
  <td>(date)</td>
  <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
  <td><input type='number' value='.00'/></td>
  <td><input type='button' class='addrow' value='Add Row Below'/></td>
  <td><input type='button' class='delrow' value='Delete' /></td>
</tr>
</table>

JavaScript

$('.delrow').click(function(){
        $(this).parent().parent().remove();
    });
    
    
$('.addrow').click(function(){
  //alert("pretend it worked");
  $("<tr><td>(date)</td><td><input type='text' placeholder='Inserted Row'/></td><td><input type='number' value='.00' class='dollar ' size='8'/></td><td><input type='button' class='addrow' value='Add Row Below'/></td><td><input type='button' class='delrow' value='Delete' /></td></tr>").insertAfter(this.parentNode.parentNode);
});