jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<body>

<table id="productTable" border="1">
    <thead>
    <tr>
        <th>Order ID</th>
        <th>Product1</th>
        <th>Description</th>
        <th>Product2</th>
         <th>Comments</th>
    </tr>
    </thead>
    <tbody>
      <tr>
         <td><input type="text" name="orderNum" value=""></td>
         <td>
			               <select class="product1" > 
			               <option value=""></option>
                    </select>
				</td>
				<td>
			  <input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >        
			                <option value=""></option>
                    </select>
				</td>  
			 <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
      <tr disabled="disabled">
         <td><input type="text" name="orderNum" value=""></td>
         <td>
			               <select class="product1" >  
			                <option value=""></option>
                    </select>
				</td>
					<td>
			<input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >  
			                <option value=""></option>
                    </select>
				</td>
		    <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
      <tr disabled="disabled">
         <td><input type="text" name="orderNum" value=""></td>
          <td>
			               <select class="product1" >  
			                <option value=""></option>
                    </select>
				</td>
					<td>
			<input type="text" name="description" value="">
				</td>
				 <td>
			               <select class="product2" >  
			                <option value=""></option>
                    </select>
				</td>
			  <td>
			  <input type="text" name="Comments" value="">
				</td>
      </tr>
      <tr disabled="disabled">
         <td><input type="text" name="orderNum" value=""></td>
          <td>
			               <select class="product1" > 
			     ...

JavaScript

function populateSelect() {
     var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}]
      var productDropdown1 = $(".product1"); 
      var productDropdown2 = $(".product2");
      $.each(ids, function(index,value) {
      $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
        $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
      });
      
       $("select").change(function() {   
         var row = $(this).closest("tr");
         var product1_drop = $('.product1',row).val();
         var product2_drop = $('.product2',row).val();
         var descValue = $('input[name="description"]').val();
         		validate(product1_drop,product2_drop, descValue);
       });
                 
        $('input[name="description"]').on('input', function(e){
          var row = $(this).closest("tr");
          var product1_drop = $('.product1',row).val();
         	var product2_drop = $('.product2',row).val();
        	validate(product1_drop,product2_drop, $(this).val());
        });
 }
 
 function validate(prod1, prod2, desc){
 	if(desc && prod1 === prod2 ){       
    alert('Product1 and Product2 cannot have same value');
  }
 }
 
$(document).ready(function(){
    populateSelect(); 
});