JavaScript を使用してオブジェクトの配列をクリックし、div にデータを表示する方法

データベースから取得したスクラップ データのページがあり、それをテーブルに表示しています (これは正常に機能します)。次に、db から別のクエリを実行して、スクラップされたデータからエラー行のみを取得し、そのデータをヘッダーの div に表示します。このようにして、ユーザーは変更するデータを知ることができます。

ユーザーがページを変更して、そのページのエラー データの最初の行を取得することを許可するのに問題があります。現在、私がやっていることは、インデックス変数を作成し、それをカウントとして使用し、ユーザーが行を 1 つずつクリックできるようにすることです。次に、そのページのエラー データがなくなると、次のページに切り替わります。

ユーザーがページを自由に変更してそのデータの正しい行を取得し、そのページのオブジェクトを上下にクリックできるようにするには、どうすればよいでしょうか?

エラー データとページ ヘッダー データが保存されているヘッダーは次のとおりです。

    <div id="pageEditDiv">
        <div class="arrowIconsDiv">
            <img src="images/up-arrow.png" class="arrowIcons" id="arrowUpPage">
            <img src="images/down-arrow.png" class="arrowIcons" id="arrowDownPage">
        </div>
        <div id="pageSummary">
             <table id="headerPagesTable">
                 <thead><tr><th>Page Num</th><th>Type</th><th>Month</th><th>Name</th><th>Reg No.</th><th>Rrc District</th></tr></thead>
                 <tbody id="pagesTableBody"></tbody>
              </table>
        </div>
        <div id="pagesTable" class="hidden"></div>
    </div>
    <div id="rowEditDiv">
        <div class="arrowIconsDiv">
            <img src="images/up-arrow.png" class="arrowIcons" id="arrowUpRow">
            <img src="images/down-arrow.png" class="arrowIcons" id="arrowDownRow">
        </div>
        <div id="editableRowToEdit" contenteditable>
            <table id="editableRowTable">
                <tbody id="pagesRowToEdit"></tbody>
            </table>
        </div>
   </div>

エラー行データを取得する場所は次のとおりです。

    $.ajax({
        type: 'POST', 
        url: 'qry/getPageReceipts.php',
        async: true,
        data: {FileId: fileId, PageNum: getPageNum, RowNum: rowNum},
        success: function(response) {
            recPageData = JSON.parse(response);
            //check if data exists or not
            recPD = {};
            if(recPageData.length == 0) {
                recPageDateEmpty = 1;
            } else {
                //map the data
                recPD = recPageData.PageNum.map((x,i) => ({
                        pageNum: x,
                        rowNum: recPageData["RowNum"][i],
                        cName: recPageData["CustomerName"][i],
                        fName: recPageData["FacilityName"][i],
                        rrcNum: recPageData["RrcNum"][i],
                        rrcType: recPageData["RrcNumType"][i],
                        volume: recPageData["Volume"][i]
                }));
                //sort the data
                recPD.sort(function(a,b) {
                    if(a.pageNum == b.pageNum) {
                        return (a.rowNum - b.rowNum);
                    } else {
                        return (a.pageNum - b.pageNum);
                    }
                });
                for(var i=0; i<recPD.length; i++) {
                    recPD[i].index = i;
                }
            }
            drawPageForm();
            drawRowEditForm();
        }
    });

ここで、ユーザーがページを上下にクリックできるようにページの概要データを描画します。

    function drawPageForm() {
        //clear div to begin with
        $(".pagesMonth").html();
        $("#pagesTableBody").empty();

        var getPages = '<table><thead><tr><th>Page Num</th><th>Type</th><th>Month</th><th>Name</th><th>Reg No.</th><th>Rrc District</th></tr></thead><tbody>';

        for(var i=0; i<getPagesResponse.length; i++) {
            getPages += '<tr class="getPagesRowEdit"><td>' + getPagesResponse["PageNum"][i] + '</td><td class="pagesPageType">' + getPagesResponse["PageType"][i] + '</td><td class="pagesMonth">' + getPagesResponse["ReportingMonth"][i] + '</td><td class="pagesFilerName">' + getPagesResponse["FilerName"][i] + '</td><td class="pagesFilerRegNo">' + getPagesResponse["FilerRegNo"][i] + '</td><td class="pagesRrcDistrict">' + getPagesResponse["RrcDistrict"][i] + '</td></tr>';
        }
        getPages += '</tbody></table>';
        //add table to div
        $("#pagesTable").html(getPages);

        //PAGES
        //delcare single object for page summary
        gPT = {
            gPRE : $(".getPagesRowEdit").eq(0),
            pNum : $(".getPagesRowEdit").find("td").eq(0).text(),
            pTB : $("#pagesTableBody"),
            aUP : $("#arrowUpPage"),
            aDP : $("#arrowDownPage"),
            place : function(row) {
                gPT.pTB.empty();
                clone = row.clone(true);
                clone.appendTo(gPT.pTB);
            }
        }
        //add row to div
        gPT.place(gPT.gPRE);
        //arrow up
        gPT.aUP.on("click", function() {
            prev = gPT.gPRE.prev();
            gPT.gPRE = prev.is("tr") ? prev : gPT.gPRE;
            gPT.place(gPT.gPRE);
            gPT.pNum = $(".getPagesRowEdit").find("td").eq(0).text();
            pageNum = gPT.pNum;
            reDrawTextContentandPDF();
        });
        //arrow down
        gPT.aDP.on("click", function() {
            next = gPT.gPRE.next();
            gPT.gPRE = next.is("tr") ? next : gPT.gPRE;
            gPT.place(gPT.gPRE);
            gPT.pNum = $(".getPagesRowEdit").find("td").eq(0).text();
            pageNum = gPT.pNum;
            reDrawTextContentandPDF();
        });
}

ここで、ユーザーがその特定のページのデータの各行をクリックして上下にクリックできるように、行エラー データを描画します。

function drawRowEditForm() {
    //get the current page type
    pageTypeValue = $(".pagesPageType").html();
    //empty row
    $("#pagesRowToEdit").empty();
    //find correct row
    recPD.find(findRecPageIndex);

    //match row with rawText row
    findMatchRowNum = $("#pagesRowToEdit").find("tr").eq(0).find("td").eq(0).text();
    findMatchRowNum = findMatchRowNum - 1;
    matchedRow = $(".rowToEdit").eq(findMatchRowNum);
    matchedRow.addClass("selected");
    //scroll div to visible row
    $("#textCodeDiv").animate({
        scrollTop: $(".selected").offset().top
    },'slow');

    //click arrow up
    $("#arrowUpRow").unbind("click").click(function() {
        clickRowArrowUp();
    });
    //click arrow down
    $("#arrowDownRow").unbind("click").click(function() {
        clickRowArrowDown();
    });
}

function clickRowArrowUp() {
            $("#pagesRowToEdit").empty();
            if($(".selected")) {
                $(".selected").removeClass("selected");
            }
            recRowIndex--;
            if(recPD.find(findRecPageIndex)) {
                drawRowEditForm();
            } else {
                prev = gPT.gPRE.prev();
                gPT.gPRE = prev.is("tr") ? prev : gPT.gPRE;
                gPT.place(gPT.gPRE);
                gPT.pNum = $(".getPagesRowEdit").find("td").eq(0).text();
                pageNum = gPT.pNum;
                reDrawTextContentandPDF();
            }
}

function clickArrowDown() {
            $("#pagesRowToEdit").empty();
            if($(".selected")) {
                $(".selected").removeClass("selected");
            }
            recRowIndex++;
            if(recPD.find(findRecPageIndex)) {
                drawRowEditForm();
            } else {
                next = gPT.gPRE.next();
                gPT.gPRE = next.is("tr") ? next : gPT.gPRE;
                gPT.place(gPT.gPRE);
                gPT.pNum = $(".getPagesRowEdit").find("td").eq(0).text();
                pageNum = gPT.pNum;
                reDrawTextContentandPDF();
            }
}

    //match the row to the error data and display in header
    function findRecPageIndex(el) {

        if(el.index === recRowIndex && el.pageNum === pageNum) {
            return $("#pagesRowToEdit").append("<tr id='recTR'><td class='hidden'>" + el.rowNum + "</td><td>" + el.cName + "</td><td>" + el.fName + "</td><td>" + el.rrcNum + "</td><td>" + el.rrcType + "</td><td>" + el.volume + "</td></tr>");
        }

    }
    function findDelPageIndex(el) {

        if(el.index === delRowIndex && el.pageNum === pageNum) {
            return $("#pagesRowToEdit").append("<tr id='delTR'><td class='hidden'>" + el.rowNum + "</td><td>" + el.cName + "</td><td>" + el.fName + "</td><td>" + el.rrcNum + "</td><td>" + el.rrcType + "</td><td>" + el.volume + "</td></tr>");
        }

    }

要約すると、ユーザーはページを変更できますが、エラー データをクリックすることはできません。ユーザーは行を変更でき、そのページにエラー データがなくなると、ページが変更され、最初のエラー データ行が表示されます。

私が知る必要があるのは、ユーザーがページを自由にクリックできるようにし、ページ番号を特定して最初のエラー行を表示し、ユーザーがそのページの正しい行をクリックできるようにする方法です。 .