Então, estou criando uma tabela usando Javascript e jQuery, e quero que quando você clicar nos td's na primeira linha da tabela, o resto dos td's nessa coluna caia. Deixe-me tentar explicar mostrando meu código. Aqui está o meu Javascript:

function createTr (heights) { //heights is just an array of words
    for (var h=0; h<heights.length; h++) { 
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { 
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
    }
}

Isso basicamente cria td's e cada td é semelhante a esse formato

<td class="rowh columni">

Eu quero que todos os td's estejam escondidos exceto os td's em .row0 e se você clicar no td in .row0 .columni, então todos os td's em .columni aparecerão. O parâmetro 'heights' é jsut um array, por exemplo, pode ser

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

e criaria uma tabela usando essas palavras, headerOne e headerTwo seriam na primeira linha, someTd e anotherTd seriam na segunda linha.

Agora, quando tento adicionar uma função de clique como assim

function animation() {
    $('td').click( function() {
        alert('clicked');
    });
}

e depois chamá-lo na minha função document.ready como assim

$(document).ready( function() {

    createTr(heights);
    animation();
});

não faz nada quando eu clico em um td. Por quê?