如何使用javascript点击对象数组并在div中显示数据

Question

我有来自数据库的报废数据页面并在表格中显示（工作正常）。然后我从数据库中得到另一个查询，只从该报废数据中获取错误行，并在标题中的div中显示该数据。这样，用户就知道要更改哪些数据。

我无法让用户更改网页，然后获取该网页的第一行错误数据。现在我正在做的是创建一个索引变量并将其用作计数并允许用户一次单击一行，然后如果该页面没有更多错误数据则更改为下一页

我如何才能获得它，以便用户能够自由地更改页面，然后获取该数据的正确行，并能够向上或向下点击该页面的对象？

这是我的标题，其中存储了错误数据和页眉数据：

    <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>");
        }

    }

所以回顾一下：用户可以更改页面，但是他们无法点击错误数据。用户可以更改行，当该页面上没有错误数据时，它将更改页面并显示第一个错误数据行。

我需要知道的是：如何允许用户自由点击页面然后它能够​​确定它是什么页面数，然后显示第一个错误行并允许用户点击正确的行对于该页面。

Answer 1

尝试将此添加到您的页面上下功能：

    for(var i=0; i<recPD.length; i++) {
        if(pageNum == recPD[i].pageNum) {
            recRowIndex = recPD[i].index;
            break;
        }
    }

在这里，您循环遍历数据，检查页码是否匹配，然后将recRowIndex变量更新为错误行数据的最低索引。

希望有效！