jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<table>
<tr>
          <th>Item</th>
          <th>Description</th>
          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>

      <tr class="item-row static">
          <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
          <a class="delete" href="javascript:;" title="Remove row">X</a>
          <a class="recall-product" href="javascript:;" title="Add Product">R</a>
          </div></td>
          <td class="description"><textarea form ="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td>
          <td><textarea class="cost" form ="testinsert" name="item_cost[]">$150.00</textarea></td>
          <td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$150.00</span></td>
      </tr>

      <tr class="item-row static">
          <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
          <a class="delete" href="javascript:;" title="Remove row">X</a>
          <a class="recall-product" href="javascript:;" title="Add Product">R</a>
          </div></td>
          <td class="description"><textarea form ="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea></td>
          <td><textarea class="cost" form ="testinsert" name="item_cost[]">$95.00</textarea></td>
          <td><textarea class="qty" form ="testinsert" name="item_qty[]">1</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
      </tr>

      <tr id="hiderow">
        <td colspan="5">

        <img src="images/rows.png" width="30px" height="auto" id="addrow" href="javascript:;" title="Add a row"/>                  
        <img src="images/products.png" width="30px" height="auto" href="javascript:;" id="fill-invoice"...

JavaScript

$('.recall-product').live('click',function(){

    var clickedRow = $(this).closest("tr");
    var auto_id = $('#auto_num').val();

    $("#product_div").css("display", "block");
    //alert(auto_id);
    $.ajax({                                      
        url: 'recall_product_fill.php?id='+auto_id,                         
        data: {action:"invoice"},                                             
        dataType: 'json',                   
        success: function(data){
        // remove staic rows
        //TODO use your correct selector for table
        $('table').find('tr.item-row.static').remove();
        
        //then append your data after first table row
            populateSelectBoxes($('#product_div #ddproduct'), data);

            function populateSelectBoxes($select, data) {
                var products = [];
                $.each(data, function() {
                    products.push('table>tr:nth-child(1)').after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">'+ this.product +'</textarea><a class="delete" href="javascript:;" title="Remove row">X</a><a class="add-product" href="javascript:;" title="Add Product">A</a></div></td><td class="description"><textarea form ="testinsert" name="item_desc[]">'+ this.description +'</textarea></td><td><textarea class="cost" form ="testinsert" name="item_cost[]">'+ this.cost +'</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty[]">'+ this.quantity +'</textarea></td><td><span class="price" form ="testinsert" name="item_price[]">'+ this.price +'</span></td></tr>'));
                    if ($(".delete").length > 0) $(".delete").show();
                    bind();
                });
                $select.append(products.join(''));
            }

            function populateTableRow(data, selectedProductAutonum) {
                var products;
                $.each(data, function() {
                    if...