Question

I have a html table whose rows are added by click add button. The row will contain 4 drop downs
Product Type , Product Description,Source,destination1,destination 1

How Can I restrict the combination of these are not duplicated in any of the rows.

Answer 1

The following code is just a check; it does not change dynamically the content to adapt it to the user change.

Using the html you provided, the function is the following:

function check(){
   var currentState=[],
       isGood=true,
       text;
   $("#dataFieldTable tr").each(function(index,element){
      if(index !==0){
          text=$(":selected",element).text();
          if(currentState.indexOf(text)!=-1){
              isGood=false;
              return false;
          }
          currentState.push(text);
      }
   });
   alert(isGood);
   return isGood;   
}

What it does is the following:

• Select all the <tr> tags in the table
• iterate over the tr we want to check (in my example, I took them all but the one with the title, but it’s something easy to change , it’s just the if(index !==0))
• grab all the selected elements in the line
• concatenate their text value
• check whether it’s different from the previous one
• if it’s different, check the next one…
• if it’s not, it’s over.
• return true or false (and alert it) depending on the outcome.

And that’s it.

You can see it in action here: http://jsfiddle.net/uQGGW/1/

If you click check line, it will alert true if all the lines are different and false elsewhere.

Hope that helps.