javascript - 如何使用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 变量更新为错误行数据的最低索引。

希望有用!