images from array generated in table

@Mr_JDec 23.2006 — #Here's a DOM possibility

[code=php]<HTML>
 <HEAD>
 <TITLE>Dom Table 2</TITLE>
 
 
 <script type="text/javascript">
 <!--
 
 data=[
 
 "pic01_tn.jpg",
 "pic02_tn.jpg",
 "pic03_tn.jpg",
 "pic04_tn.jpg",
 "pic05_tn.jpg",
 "pic06_tn.jpg",
 "pic07_tn.jpg",
 "pic08_tn.jpg",
 "pic09_tn.jpg",
 "pic10_tn.jpg",
 "pic11_tn.jpg",
 "pic12_tn.jpg",
 "pic13_tn.jpg",
 "pic15_tn.jpg",
 "pic15_tn.jpg",
 "pic16_tn.jpg",
 "pic17_tn.jpg",
 "pic18_tn.jpg",
 "pic19_tn.jpg",
 "pic20_tn.jpg"
 
 ]
 
 cellsPerRow=4 // Number Of cells Per Row
 
 spanLastCell=1 // 0 = no, 1 = yes
 
 function createTable(){
 cellsPerRow=cellsPerRow
 
 if(cellsPerRow>window["data"].length){ // if number of cells per row greater the array length
 cellsPerRow=window["data"].length // number of cell equals array length
 }
 
 totalCells=window["data"].length // get total cells
 totalRows=Math.ceil(totalCells/cellsPerRow) // get total rows
 
 if(spanLastCell==0){ // ***** extend the array to create empty cells to make up last row if needed *****
 totalCells=Math.ceil(totalCells)
 while(totalCells%cellsPerRow != 0){ 
 totalCells++
 window["data"][totalCells-1]=[" "] // put a space in the empty cells
 }
 }
 
 startCount=0
 endCount=cellsPerRow
 
 newTable = document.createElement("TABLE")
 newTable.setAttribute("border","1px")
 
 newTBody = document.createElement("TBODY")
 
 for(i=0;i<totalRows;i++) {
 newRow=document.createElement("TR")
 
 for (j=startCount; j<endCount; j++){
 newCell=document.createElement("TD")
 
 newImg=document.createElement("IMG")
 newImg.src=data[j]
 
 
 newCell.appendChild(newImg)
 
 spanSize=(totalRows*cellsPerRow)-totalCells 
 maxCells=totalRows*cellsPerRow
 spanColumns=(maxCells-totalCells)+1
 if(j==totalCells-1){
 newCell.colSpan=spanColumns
 newCell.align="center"
 }
 
 newRow.appendChild(newCell)
 
 }
 
 startCount+=cellsPerRow // loop increment number
 endCount+=cellsPerRow // loop increment number
 if(endCount>totalCells){
 endCount-=endCount-totalCells
 }
 
 newTBody.appendChild(newRow)
 
 }
 
 newTable.appendChild(newTBody)
 
 document.getElementById("my_table").appendChild(newTable)
 
 }
 
 // add onload="createTable()" to the opening BODY tag
 
 // -->
 </script>
 </HEAD>
 <BODY onload="createTable()">
 <h1>Dom Table 2</h1>
 <P>Dynamically create a table and populate its cells, the data for the cells is contained in an array.
 <P>The length of the array determines how many cells are initially created, choose how many cells in a row by changing the value of variable <b>cellsPerRow</b>, the script will calculate the number of rows required.
 
 <P>If there is less cell data than there are cells needed to finish the last row the script creates the additional cells to finish the row or you can have the last cell span the remaining columns by changing variable <b>spanLastCell</b> to 1.
 <BR><BR>
 
 <div id="my_table"></div>
 
 </BODY>
 </HTML>
 
 
 [/code]

@AnnaccondauthorDec 24.2006 — #I'd like to find a way to make it way as in example which I showed. I need just way of showing all images from array index to be displayed on the page, to could put it in table cell. Is this possible simply and short way as with text array?

@Mr_JDec 24.2006 — #<table border="1">

<script type="text/javascript">

var sometext = new Array()

sometext[0] = "pic1.jpg"

sometext[1] = "pic2.jpg"

sometext[2] = "pic3.jpg"

sometext[3] = "pic4.jpg"

sometext[4] = "pic5.jpg"

for (i=0;i<sometext.length;i++)

{

document.write('<tr>');

document.write('<td><img src="' + sometext[i] + '" alt="'+sometext[i]+'"></td>');

document.write('</tr>')

}

</script>

</table>

@AnnaccondauthorDec 24.2006 — #Oh THANK YOU VERY MUCH! I was trying similar but it didn't worked - I see now that I just missed "'". Thank you once again ?

images from array generated in table

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

images from array generated in table

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴