Question

I have a current problem with jQuery animations… here’s what I’m currently doing… I have four multiple select menus that when changed I wish to put the selected values in a table which has 4 different tbody tags (areas) which I have made unique with IDs. The reason I need the 4 different tbody areas is due to the nature of the data I am displaying, it must be in a certain order. Anyway my real problem is this, when the user changes or amends the values of the menus I wish to capture the event, determine which menu was clicked, obtain its value (or values) and display this in the appropriate part of the table. Now to be snazzy (and due to the rules associated with the selections) I wish to fade out the previous menu selection and fade in the new selection.

I’ve stripped down my code and what I have works however the new content is being duplicated two fold everytime I run the function (or click one of the select menus). The old content simply fades away, the new content then fades in… but instead of 1 row I have 2. The new time I run it my content fades out then 4 new rows are created. Here’s a minimized version of what I have… why is the content duplicated, am I being stupid or something?

$(document).ready(function() {
    changeTable();
});


  function changeTable(){

    var selectArray = ["cat", "catOpt", "tariff", "tariffOpt"], // these are the IDs of the select menus...
        i;

    for(i=0;i<selectArray.length;i++){
        $("#" + selectArray[i]).click(function () {
            if(this.id == "cat"){
                $('#dynamicTableHolder #dtCats').find("td").fadeOut(1000, function(){ 
                    $(this).parent().remove(); // due to problems with jQuery we have to fadeOut the TDs then remove the TR
                    $('#dynamicTableHolder #dtCats').append('<tr><td>'  + $("#cat").val() + '</td><td></td></tr>').hide().fadeIn(1000); // Now let's fade in some new content
                });
            }
        }); 
    }       
  }

Here’s a JSfiddle so you can see the issue…

http://jsfiddle.net/itakesmack/xKZfr/1/

Answer 1

Your problem is with this line :

$('#dynamicTableHolder #dtCats').find("td")

this is finding multiple tds so your code is executing per td …

You could try this approach – this replaces the current row in the table : http://jsfiddle.net/xKZfr/2/