创建表层次结构并按父级和父级以下

Question

您好正在从我的数据集dataRaw在这样的表上创建。在每个创建的行的第5个单元格中，我创建一个可点击的跨度。

          <div id="table-scroll" style="max-width:708px !important">
                                <table class="table table-hover" id="errorTable" style="width:676px !important"></table>
                            </div>

           var table = document.getElementById("errorTable");
           for (var i = dataRaw.length; i > 0; i--) {

                var r = dataRaw[i - 1];
                var row = table.insertRow(0);
                row.id = r[0];
                row.className = "parent";
                for (var x = 0; x < r.length; x++) {
                    //Setting the columns
                    if (i === 1) {
                        var headerCell = document.createElement("TH");
                        headerCell.innerHTML = r[x];
                        row.appendChild(headerCell);

                    } else {
                        var cell = row.insertCell(x);
                        if (x === 5) {
                            var span = document.createElement('span');
                            span.onclick = ErrorClicked;
                            cell.appendChild(span);

                        }
                        else {
                              cell.innerHTML = r[x];

                        }
                    }
                }

            }

如果单击跨度，则将子级加载到此行并将其添加到表中。

function ErrorClicked() {

       var table = document.getElementById("errorTable");
       var rowIndex = document.getElementById("IdOfTheClickedRow").rowIndex;

       $.ajax({ call to get data stored in items}) //not all code....

       for (var i = 0; i < items.length; i++) {

                var row = table.insertRow(rowIndex + i + 1);
                    row.id = IdOfTheClickedRow+ i + 1;
                    row.className = "child-" + IdOfTheClickedRow;

                    var td = document.createElement('td');
                    td = row.insertCell(0);

                    var td1 = document.createElement('td');
                    td1 = row.insertCell(1);

                    var td2 = document.createElement('td');
                    td2 = row.insertCell(2);

                    var td3 = document.createElement('td');
                    td1 = row.insertCell(3);
       }
    }

我现在扩大了原来的桌子，可容纳父母的孩子。现在，孩子们可以通过以下方式进行切换：

$（'tr.child-'+ IdOfTheClickedRow）.toggle（）;

到目前为止很好。

我的问题是何时需要对表格进行排序。我使用来自

的排序代码

https://www.w3schools.com/howto/howto_js_sort_table.asp （表id =“ myTable2”示例）

如果孩子正在显示，则该表无法排序，仅当他们不显示时-因此只能由父母排序。

但是我的问题是简短，以便孩子们跟随他们的父母...任何人都可以修改分类代码以包括孩子们吗？我要放弃......

这就是我要去的地方。

      switching = true;
                //Set the sorting direction to ascending:
                dir = "asc";
                /*Make a loop that will continue until
                no switching has been done:*/
                while (switching) {
                    //start by saying: no switching is done:
                    switching = false;
                    rows = table.getElementsByTagName("TR");
                    parentRows = table.getElementsByClassName("parent");
                    var nextParrentStart = 0;
                    for (i = 1; i < parentRows.length - 1; i++) { //Change i=0 if you have the header th a separate table.

                        shouldSwitch = false;
                        x = parentRows[i].getElementsByTagName("TD")[n];
                        y = parentRows[i + 1].getElementsByTagName("TD")[n];
                        if (dir == "asc") {
                            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                                shouldSwitch = true;
                                break;
                            }
                            else {
                                nextParrentStart++
                            }
                        } else if (dir == "desc") {
                            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                                shouldSwitch = true;
                                break;
                            }
                            else {
                                nextParrentStart++
                            }
                        }
                    }
                    if (shouldSwitch) {
                        var array = [];
                        var parrentElementID = parentRows[i+1].id;
                        var parrentElementIDtoChangeWith = 0;
                        var parrentPosInBigTable = 0;
                        for (let item of rows) {
                            if (item.className == "child-" + parrentElementID) {
                                array.push(item.rowIndex);
                            }

                            if (item == parentRows[i]) {
                                parrentPosInBigTable = item.rowIndex;
                            }

                            if (item == parentRows[i+1]) {
                                parrentElementIDtoChangeWith = item.rowIndex;
                            }

                        }
                        //move parrent
                        rows[parrentPosInBigTable].parentNode.insertBefore(rows[parrentElementIDtoChangeWith], rows[parrentPosInBigTable]);

                        //move children
                        if (array.length > 0) {
                            nextParrentStart += array.length;
                            for (var x = 0; x < length; x++) {
                                rows[i].childNodes.insertBefore(rows[parrentElementIDtoChangeWith + x + 1], rows[parrentPosInBigTable+x+1]);
                                additionalRowsForChildren++;
                            }

                            array = [];
                        }
                        switching = true;
                        //Each time a switch is done, increase this count by 1:
                        switchcount++;
                    } else {
                        /*If no switching has been done AND the direction is "asc",
                        set the direction to "desc" and run the while loop again.*/
                        if (switchcount == 0 && dir == "asc") {
                            dir = "desc";
                            switching = true;
                        }
                    }
                }