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" class="add-invoice" title="Add Invoice" />
      <img src="images/products.png" width="30px" height="auto" href="javascript:;"...

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 (this.autonum == selectedProductAutonum) {
            products = this;
            return false;
          }
        });
      }

      $('#product_div #ddproduct li').click(function(e) {
        var selection =...