Javascript 如何创建包含父子行的层次结构表

这是我的桌子

它将加载它们并在对应行下添加一个表行 这是我的jquery代码，我想让它分层，就像父级和子级应该有所不同一样

 function showHierarchy(taskId) {

        if ($('.subtaskof_' + taskId).text() == '') {
                       
            $.ajax('/Tasks/sfsubtasks?taskId=' + taskId,   // request url
                {
                    async: false,
                    success: function (data, status, xhr) {// success callback function
                        
                        var subtasklist = JSON.parse(data)
                        console.log(subtasklist);


                        for (i = 0; i < subtasklist.length; i++) {
                          
                            subtask = subtasklist[i];
                            var therowis =  '<tr class=subtaskof_' + taskId + '>'
                                + '<td id="subtaskrow_' + subtask['InstanceId'] + '" align="right">_</td>'                            
                                + '<td>' + subtask['InstanceId'] + '</td>'
                                + '<td>' + subtask["Title"] + '</td>'
                                + '<td>' + subtask["Deliverables"] + '</td>'
                                + '<td>' + subtask["StartDate"] + '</td>'
                                + '<td>' + subtask["Priority"] + '</td>'
                                + '<td>' + subtask["State"] + '</td>'
                                + '<td><a href="/Tasks/Details?taskId=' + subtask['InstanceId'] + '">See Details_subt</a></td>'
                                + '<td><a href="/Tasks/New?projectId=' + subtask['ProjectId'] + '&amp;ParentTaskId=' + subtask['InstanceId'] + '">Add Sub Task_subt</a></td>'
                                + '</tr>'  

                            // Find position to add new subtask row in the Task table
                            $("#my-grid tr").filter(function () {
                                if ($(this).text().indexOf(taskId) >= 0) {
                                    $(this).after(therowis);
                                    issubsubtaskexists = false;
                                    console.log("chield checking for - " + subtask['InstanceId'])
                                    $.ajax('/Tasks/sfsubtasks?taskId=' + subtask['InstanceId'],   // request url
                                    {
                                        async: false,
                                        success: function (data_, status_, xhr_) {
                                            if (data_.length > 0) {
                                                console.log("The data_ is - " + data_);
                                                var subsubtasklist = JSON.parse(data_);
                                                console.log("The subsubtasklist is - " + subsubtasklist)
                                                console.log("lenght for - " + subtask['InstanceId'] + " , is - " + subsubtasklist);

                                                if (subsubtasklist.length > 0) {
                                                    $('#subtaskrow_' + subtask['InstanceId']).html("<b><a style='font-size:25px; padding-left:17px;' id='lnk_" + subtask['InstanceId'] + "' href='#' onclick='showHierarchy(" + subtask['InstanceId'] + ")'> + </a></b>")
                                                    issubsubtaskexists = true;
                                                }

                                            }
                                        }
                                        });
                                    console.log("The taskId is - "+taskId)
                                    $('#lnk_' + taskId).html('<b>_</b>');
                                    
                                }
                            });
                        }

                    }
                });

        } else {
                // Toggle/removing subtasks
            $('.subtaskof_' + taskId).remove();
            $.ajax('/Tasks/sfsubtasks?taskId=' + taskId,
                {
                    success: function (data, status, xhr) {
                        console.log("Checking for child node of taskId - " + taskId);
                        var subsubtasklist = JSON.parse(data)
                        console.log(subsubtasklist);

                        for (i = 0; i < subsubtasklist.length; i++) {
                            $('.subtaskof_' + subsubtasklist[i]['InstanceId']).remove();
                            $.ajax('/Tasks/sfsubtasks?taskId=' + subsubtasklist[i],
                            {
                                success: function (data, status, xhr) {
                                    console.log("Checking for child node of taskId - " + taskId);
                                    var subsubtasklist_ = JSON.parse(data)
                                    console.log(subsubtasklist_);
                                    for (j = 0; j < subsubtasklist_.length; j++) {
                                        $('.subtaskof_' + subsubtasklist_[j]['InstanceId']).remove();
                                    }                                    
                                }
                            });                            
                        }
                    }
                });
            
            $('#lnk_' + taskId).html('<b>+</b>');

        }
    }

函数showHierarchy（taskId）{
如果（$（'.subtaskof_'+taskId）.text（）=''）{
$.ajax（'/Tasks/sfsubtasks？taskId='+taskId，//请求url
{
async:false，
成功：函数（数据、状态、xhr）{//success回调函数
var subtasklist=JSON.parse（数据）
console.log（子任务列表）；
对于（i=0；i=0）{
美元（本）。在（therowis）之后；
issubsubtaskexists=false；
log（“chield正在检查-”+子任务['InstanceId']）
$.ajax（'/Tasks/sfsubtasks？taskId='+subtask['InstanceId']，//请求url
{
async:false，
成功：功能（数据、状态、xhr）{
如果（数据长度>0）{
log（“数据为-”+数据）；
var subsubtasklist=JSON.parse（数据）；
log（“子任务列表为-”+子任务列表）
log（“长度为-”+子任务['InstanceId']+”，为-“+子任务列表）；
if（subsubtasklist.length>0）{
$（'#subtaskrow'+子任务['InstanceId']）.html（“”）
issubsubtaskexists=true；
}
}
}
});
log（“taskId为-”+taskId）
$（'#lnk'+taskId）.html（''uu'）；
}
});
}
}
});
}否则{
//切换/删除子任务
$（'.subtaskof_'+taskId）.remove（）；
$.ajax（'/Tasks/sfsubtasks？taskId='+taskId，
{
成功：功能（数据、状态、xhr）{
log（“检查taskId的子节点-”+taskId）；
var subsubtasklist=JSON.parse（数据）
console.log（子任务列表）；
对于（i=0；i

请让我知道这个表可以做些什么来分层显示数据

 function showHierarchy(taskId) {

        if ($('.subtaskof_' + taskId).text() == '') {
                       
            $.ajax('/Tasks/sfsubtasks?taskId=' + taskId,   // request url
                {
                    async: false,
                    success: function (data, status, xhr) {// success callback function
                        
                        var subtasklist = JSON.parse(data)
                        console.log(subtasklist);


                        for (i = 0; i < subtasklist.length; i++) {
                          
                            subtask = subtasklist[i];
                            var therowis =  '<tr class=subtaskof_' + taskId + '>'
                                + '<td id="subtaskrow_' + subtask['InstanceId'] + '" align="right">_</td>'                            
                                + '<td>' + subtask['InstanceId'] + '</td>'
                                + '<td>' + subtask["Title"] + '</td>'
                                + '<td>' + subtask["Deliverables"] + '</td>'
                                + '<td>' + subtask["StartDate"] + '</td>'
                                + '<td>' + subtask["Priority"] + '</td>'
                                + '<td>' + subtask["State"] + '</td>'
                                + '<td><a href="/Tasks/Details?taskId=' + subtask['InstanceId'] + '">See Details_subt</a></td>'
                                + '<td><a href="/Tasks/New?projectId=' + subtask['ProjectId'] + '&amp;ParentTaskId=' + subtask['InstanceId'] + '">Add Sub Task_subt</a></td>'
                                + '</tr>'  

                            // Find position to add new subtask row in the Task table
                            $("#my-grid tr").filter(function () {
                                if ($(this).text().indexOf(taskId) >= 0) {
                                    $(this).after(therowis);
                                    issubsubtaskexists = false;
                                    console.log("chield checking for - " + subtask['InstanceId'])
                                    $.ajax('/Tasks/sfsubtasks?taskId=' + subtask['InstanceId'],   // request url
                                    {
                                        async: false,
                                        success: function (data_, status_, xhr_) {
                                            if (data_.length > 0) {
                                                console.log("The data_ is - " + data_);
                                                var subsubtasklist = JSON.parse(data_);
                                                console.log("The subsubtasklist is - " + subsubtasklist)
                                                console.log("lenght for - " + subtask['InstanceId'] + " , is - " + subsubtasklist);

                                                if (subsubtasklist.length > 0) {
                                                    $('#subtaskrow_' + subtask['InstanceId']).html("<b><a style='font-size:25px; padding-left:17px;' id='lnk_" + subtask['InstanceId'] + "' href='#' onclick='showHierarchy(" + subtask['InstanceId'] + ")'> + </a></b>")
                                                    issubsubtaskexists = true;
                                                }

                                            }
                                        }
                                        });
                                    console.log("The taskId is - "+taskId)
                                    $('#lnk_' + taskId).html('<b>_</b>');
                                    
                                }
                            });
                        }

                    }
                });

        } else {
                // Toggle/removing subtasks
            $('.subtaskof_' + taskId).remove();
            $.ajax('/Tasks/sfsubtasks?taskId=' + taskId,
                {
                    success: function (data, status, xhr) {
                        console.log("Checking for child node of taskId - " + taskId);
                        var subsubtasklist = JSON.parse(data)
                        console.log(subsubtasklist);

                        for (i = 0; i < subsubtasklist.length; i++) {
                            $('.subtaskof_' + subsubtasklist[i]['InstanceId']).remove();
                            $.ajax('/Tasks/sfsubtasks?taskId=' + subsubtasklist[i],
                            {
                                success: function (data, status, xhr) {
                                    console.log("Checking for child node of taskId - " + taskId);
                                    var subsubtasklist_ = JSON.parse(data)
                                    console.log(subsubtasklist_);
                                    for (j = 0; j < subsubtasklist_.length; j++) {
                                        $('.subtaskof_' + subsubtasklist_[j]['InstanceId']).remove();
                                    }                                    
                                }
                            });                            
                        }
                    }
                });
            
            $('#lnk_' + taskId).html('<b>+</b>');

        }
    }