Append and collapse child row
<p>I want to append and collapse child row by clicking parent row, but it does not work.
What should I do. Can anybody help??</p>

<p>This is my parent row:</p>

<pre><code>$j(document).ready(function(){

$.ajax({
type: 'POST',
url:"scr1.php",

}).done(function(data){

for(var i=0; i&lt;data.length; i++){

    var no = i+1;
    $table ="&lt;tr class='row-parent'&gt;";
    $table += "&lt;td align='right'&gt;"+no+ "&lt;/td&gt;";
    $table += "&lt;td  class='row-child'&gt;"+data[i].uid+ "&lt;/td&gt;";
    $table += "&lt;td&gt;"+data[i].document_id+ "&lt;/td&gt;";
    $table += "&lt;td&gt;"+data[i].activity+ "&lt;/td&gt;";
    $table += "&lt;td&gt;"+data[i].date_time+ "&lt;/td&gt;";
    $table +="&lt;/tr&gt;";

    $("#docLoc").append($table);
    }
    });
});
</code></pre>

<p>And this is my child row:</p>

<pre><code>//child row
$(".row-parent").live("click",function(){

    var param = $(this).closest('tr').find('.row-child').text();//GET uid of row

    $.ajax({
        type: 'POST',
        url:"scr2.php",
        data:{ uid: param},
        //Link to history.php. Pass user_id to url
        }).done(function(data){

        for(var i=0; i&lt;data.length; i++){
            alert(data[i].uid);
            var no = i+1;
            $table ="&lt;tr&gt;";
            $table += "&lt;td align='right'&gt;"+no+ "&lt;/td&gt;";
            $table += "&lt;td&gt;"+data[i].uid+ "&lt;/td&gt;";
            $table += "&lt;td&gt;"+data[i].document_id+ "&lt;/td&gt;";
            $table += "&lt;td&gt;"+data[i].activity+ "&lt;/td&gt;";
            $table += "&lt;td&gt;"+data[i].date+ "&lt;/td&gt;";
            $table +="&lt;/tr&gt;";

            $("#docLoc").append($table);
        }

    });
});
</code></pre>

<p>Did I miss out something??</p>

<p>Thanks in advance!!</p>