how to place sliced images into a javascript table

 <html>
 
  <body>

  <div id="images">

 <table>
   <script type= "text/javascript">
      var myArray = new Array();

     myArray[0]= new Array("images/bcpot002_r1_c1.jpg");
     myArray[1] = new Array("images/bcpot002_r1_c2.jpg");
     myArray[2] = new Array("images/bcpot002_r1_c3.jpg");
     myArray[3] = new Array("images/bcpot002_r1_c4.jpg");
     myArray[4] = new Array("images/bcpot002_r1_c5.jpg");
 
 
 var  myArray2 = new Array();

    myArray2[0] = new Array("images/bcpot002_r2_c1.jpg");
    myArray2[1] = new Array("images/bcpot002_r2_c2.jpg");
    myArray2[2]= new  Array("images/bcpot002_r2_c3.jpg");
    myArray2[3] = new Array("images/bcpot002_r2_c4.jpg");
    myArray2[4] = new Array("images/bcpot002_r2_c5.jpg");

   
 var myArray3 = new  Array();

    myArray3[0] = new Array("images/bcpot002_r3_c1.jpg");
    myArray3[1] = new Array("images/bcpot002_r3_c2.jpg");
    myArray3[2] = new Array("images/bcpot002_r3_c3.jpg");
    myArray3[3] = new Array("images/bcpot002_r3_c4.jpg");
    myArray3[4] = new Array("images/bcpot002_r3_c5.jpg");
    

 var myArray4 = new  Array();

    myArray4[0] = new Array("images/bcpot002_r4_c1.jpg");
    myArray4[1] = new Array("images/bcpot002_r4_c2.jpg");
    myArray4[2] = new Array("images/bcpot002_r4_c3.jpg");
    myArray4[3] = new Array("images/bcpot002_r4_c3.jpg");
    myArray4[4] = new Array("images/bcpot002_r4_c3.jpg");
  

  for (var i=0; i<myArray.length; i++){
     document.write("<tr><td>" + myArray[i] + "</td>");
     document.write("<td>" + myArray2[i] + "</td>");
     document.write("<td>" + myArray3[i] + "</td>");
     document.write("<td>" + myArray4[i] + "</td></tr>");
} 

 </script>
 </table>
 </div>
 <html>

JavaScript
​x
 
 <html>
 
  <body>
​
  <div id="images">
​
 <table>
   <script type= "text/javascript">
      var myArray = new Array();
​
     myArray[0]= new Array("images/bcpot002_r1_c1.jpg");
     myArray[1] = new Array("images/bcpot002_r1_c2.jpg");
     myArray[2] = new Array("images/bcpot002_r1_c3.jpg");
     myArray[3] = new Array("images/bcpot002_r1_c4.jpg");
     myArray[4] = new Array("images/bcpot002_r1_c5.jpg");
 
 
 var  myArray2 = new Array();
​
    myArray2[0] = new Array("images/bcpot002_r2_c1.jpg");
    myArray2[1] = new Array("images/bcpot002_r2_c2.jpg");
    myArray2[2]= new  Array("images/bcpot002_r2_c3.jpg");
    myArray2[3] = new Array("images/bcpot002_r2_c4.jpg");
    myArray2[4] = new Array("images/bcpot002_r2_c5.jpg");
​
   
 var myArray3 = new  Array();
​
    myArray3[0] = new Array("images/bcpot002_r3_c1.jpg");
    myArray3[1] = new Array("images/bcpot002_r3_c2.jpg");
    myArray3[2] = new Array("images/bcpot002_r3_c3.jpg");
    myArray3[3] = new Array("images/bcpot002_r3_c4.jpg");
    myArray3[4] = new Array("images/bcpot002_r3_c5.jpg");
    
​
 var myArray4 = new  Array();
​
    myArray4[0] = new Array("images/bcpot002_r4_c1.jpg");
    myArray4[1] = new Array("images/bcpot002_r4_c2.jpg");
    myArray4[2] = new Array("images/bcpot002_r4_c3.jpg");
    myArray4[3] = new Array("images/bcpot002_r4_c3.jpg");
    myArray4[4] = new Array("images/bcpot002_r4_c3.jpg");
  
​
  for (var i=0; i<myArray.length; i++){
     document.write("<tr><td>" + myArray[i] + "</td>");
     document.write("<td>" + myArray2[i] + "</td>");
     document.write("<td>" + myArray3[i] + "</td>");
     document.write("<td>" + myArray4[i] + "</td></tr>");
} 
​
 </script>
 </table>
 </div>
 <html>
​

I have to place images into a table, only using java script.

I have this so far., and i am unsure of how to get the images to actually display as actual images for the javascript table. My teacher told us to use document.write, any help will be appreciated.

Answer

You need to use something like below for image:

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

JavaScript
 
document.write("<tr><td><img src='" + myArray[i] + "'</td>");
​

Advertisement

Answer