Javascript-行がテーブル内の4つのセルで埋められている場合、自動的に別の行に切り替え/作成します
モハマド・アリーブ・シディキ
タイトルは一目瞭然だと思います。を使用XMLHttpRequestしてデータを取得していますが、データはテーブルの列に追加されています。行内に4列のみを含めることを許可することにしました。別の項目が存在する場合は、別の行に追加する必要があります。これは私がしたことです：
//...
//unneccessary
//...
var album_photos = JSON.parse(xhr2.responseText);
for(var i = 0; i < album_photos.length; i++) {
if(!isInArray(album_photos[i].Image_ID, image_ids)) {
var tr = document.getElementById("tiare");
if(i % 4 == 0) {
tr = document.createElement("tr");
document.getElementById("images").appendChild(tr);
}
//...
//creating elements to be append
//...
tr.appendChild(td);
td.appendChild(imagewrap);
imagewrap.appendChild(imagemenu);
imagemenu.appendChild(imagemenuimg1);
imagemenu.appendChild(imagemenuimg2);
imagewrap.appendChild(imagewrapimg);
image_ids.push(album_photos[i].Image_ID);
//...![enter image description here][1]
//unneccessary
//...
そしてこれはマークアップです：
<table width="80%" id="images">
<tr id="tiare">
</tr>
</table>
正しく分割されていないことを確認してください。 
どうすればこれを達成できますか、私のロジックはまったく機能していません！私は何をすべきか？
PS：jQueryソリューションは許可されていません。:)
どんな助けでもいただければ幸いです。前もって感謝します。:)
更新：コードを次のように変更しました：
function getAlbumImages() {
var xhr2 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr2.open('GET', 'admin/images_data.php');
xhr2.onreadystatechange = function(e) {
if(xhr2.readyState == 4 && xhr2.status == 200) {
var oldtable = document.getElementById("images");
var newtable = oldtable.cloneNode();
var tr = document.createElement("tr");
var album_photos = JSON.parse(xhr2.responseText);
for(var i = 0; i < album_photos.length; i++) {
if(!isInArray(album_photos[i].Image_ID, image_ids)) {
if(i%4 == 0 && i != 0){
newtable.appendChild(tr);
tr = document.createElement('tr');
}
var td = document.createElement('td');
var imagewrap = document.createElement('div');
imagewrap.className = "image-wrap";
var imagemenu = document.createElement('div');
imagemenu.className = "image-menu";
var imagemenuimg1 = document.createElement('img');
imagemenuimg1.src = "img/edit_img.png";
var imagemenuimg2 = document.createElement('img');
imagemenuimg2.src = "img/close.png";
var imagewrapimg = document.createElement('img');
imagewrapimg.className = "thumbnail";
imagewrapimg.src = "admin/album_photos/" + album_photos[i].Image_Path;
imagewrapimg.onclick = function() { showBigImage(this); };
tr.appendChild(td);
td.appendChild(imagewrap);
imagewrap.appendChild(imagemenu);
imagemenu.appendChild(imagemenuimg1);
imagemenu.appendChild(imagemenuimg2);
imagewrap.appendChild(imagewrapimg);
image_ids.push(album_photos[i].Image_ID);
} else {
continue;
}
}
newtable.appendChild(tr);
oldtable.parentNode.replaceChild(newtable, oldtable);
}
}
xhr2.send(null);
}
この関数はsetInterval、5000ミリ秒のブレークで内部で呼び出されます。
今来る問題はそれが5秒後に消えることです。どうすればそれを解決できますか？
jfriend00
私が見る最初の問題はそれであるiとi % 4、テーブル内の画像はありませんが、それは、返されたデータの画像です。すでに配列に画像が含まれているとすぐに、この2つは異なります。i % 4テーブル内の実際の画像数であるインデックスを使用する必要があります。最初に作成したテーブル内の画像の数を個別にカウントすることができます。
var imageCnt = document.getElementById("images").getElementsByTagName("td").length
また、テーブルに画像を追加し、チェック%imageCnt % 4して新しい行を追加するタイミングを決定するたびに増加します。
次に、テーブルの最初の行ではなく、テーブルの最後の行に画像を追加しないでください。これは、追加のスロットが配置され、新しい空の行が配置される場所だからです。新しい行を作成したときに最後の行に画像を追加しますが、開始時に最後の行が部分的に埋められたときは追加しません。その場合、最初の行に画像を追加します。最後の行から始めることができます
var table = document.getElementById("images");
var lastRow = table.rows[table.rows.length - 1];
これらを最初のコード例に適用すると、次のように機能します。
//...
//unneccessary
//...
var album_photos = JSON.parse(xhr2.responseText);
var table = document.getElementById("images");
var tableBody = table.getElementsByTagName("tbody")[0];
var lastRow = table.rows[table.rows.length - 1];
// initialize cell count
var cellCount = table.getElementsByTagName("td").length;
for(var i = 0; i < album_photos.length; i++) {
if(!isInArray(album_photos[i].Image_ID, image_ids)) {
if (cellCount % 4 == 0 && cellCount !== 0) {
// make new row and append it to the table body
lastRow = document.createElement("tr");
tableBody.appendChild(lastRow);
}
//...
//creating elements to be append
//...
td.appendChild(imagewrap);
imagewrap.appendChild(imagemenu);
imagemenu.appendChild(imagemenuimg1);
imagemenu.appendChild(imagemenuimg2);
imagewrap.appendChild(imagewrapimg);
// best to append the new cell when it's fully formed
lastRow.appendChild(td);
++cellCount;
image_ids.push(album_photos[i].Image_ID);
//...![enter image description here][1]
//unneccessary
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
コメントを追加