2
データベースからスクラップされたデータのページを表示し、それをテーブルに表示します（正常に動作します）。次に、dbからの別のクエリが、その廃棄されたデータからエラー行を取得し、そのデータをヘッダーのdivに表示するだけです。このようにして、ユーザーは変更するデータを知ることができます。javascriptを使用してオブジェクトの配列をクリックして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>");
}
}
だから要約：ユーザーがページを変更することができますが、それらは、エラーデータを順にクリックすることはできません。ユーザーは行を変更できます。そのページにエラーデータがなくなると、ページが変更され、最初のエラーデータ行が表示されます。
私が知る必要があるのは、ユーザーがページを自由にクリックできるようにする方法と、そのページの番号を特定してその最初のエラー行を表示し、ユーザーが正しいものをクリックできるようにする方法ですそのページの行。ここで
for(var i=0; i<recPD.length; i++) {
if(pageNum == recPD[i].pageNum) {
recRowIndex = recPD[i].index;
break;
}
}
ページ番号が一致し、その後は、エラー行の最低のインデックスにrecRowIndex変数を更新するかどうかのチェック、データをループしている：あなたのページの上下の機能にこれを追加すること
ありがとうございます！それが私が行方不明だったことは信じられない – JBaldwin