My task is to create a tree-like table structure where clicking on a specific row will reveal and add new rows below it. Specifically, I am designing the Category and SubCategory structure.
Currently, I can append rows after a specified row but am struggling to incorporate any effects when doing so.
$.post("quoteConversionsByCategory.cfm",
{
action:1,
categoryID:categoryID
},
function(response){
var jsonResponse = JSON.parse(response);
$.each(jsonResponse.DATA, function(i){
var newData = $("<tr class='subcategoryrow' rel="+ jsonResponse.DATA[i][0] +" id=category"+ jsonResponse.DATA[i][0] +" parentID="+categoryID+" ><td colspan='1'>"+jsonResponse.DATA[i][1]+"</td></tr>");
$("#category" + categoryID).after( newData ).fadeIn('slow');;
});
});
I am dynamically generating subcategories and appending them after a specific category row. How can I implement effects like fade or slide when adding these new rows?