469,626 Members | 883 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

How to get an array of table data into multiple text box elements

Hi all,

I have trouble getting an array of data stored in a separate javascript file i.e. a file called books.js into a table of data for a .xhtml file.

There are 50 Records in this file.
There are 5 colums of data I wish to display.
I want to display these records in groups of 10.

Based on the fact that the records I want are located in a separate file, how can I get these details to show on the form and manipulate the data to show in groups of 10?

I know the following code is far from complete but I hope it will explain further what I mean.

Thanks

Jonnie
Expand|Select|Wrap|Line Numbers
  1.  
  2. function refill();
  3. {
  4. for (0; numoflines; a++) {
  5. document.forms[0].elements[5*a].value=anthologies[a+topofpage][0];
  6. document.forms[1].elements[5*a+1].value=anthologies[a+topofpage][1];
  7. document.forms[2].elements[5*a+2].value=anthologies[a+topofpage][2];
  8. document.forms[3].elements[5*a+3].value=anthologies[a+topofpage][3];
  9. document.forms[4].elements[5*a+4].value=anthologies[a+topofpafe][4];
  10. }
  11. }
  12. </script>
  13.  
  14. <script type = "text/ecmascript">
  15. function scrolldown ();
  16. {
  17. topofpage+=12;
  18. }
  19. </script>
  20.  
  21. <!--Customer Details
  22.  
  23. enter name, address, post code, date of birth and credit card type and numbe
  24.  
  25.  -->
  26.  
  27. <table border = "1">
  28. <tr>
  29.     <td>Product Code</td>
  30.     <td>Title</td>
  31.     <td>Author</td>
  32.     <td>Quantity</td>
  33.     <td>Unit Price</td>
  34. </tr>
  35. <tr>
  36.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  37.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  38.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  39.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  40.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  41. </tr>
  42. <tr>
  43.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  44.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  45.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  46.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  47.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  48. </tr>
  49. <tr>
  50.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  51.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  52.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  53.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  54.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  55. </tr>
  56. <tr>
  57.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  58.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  59.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  60.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  61.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  62.  
  63. </tr>
  64. <tr>
  65.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  66.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  67.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  68.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  69.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  70. </tr>
  71. <tr>
  72.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  73.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  74.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  75.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  76.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  77. </tr>
  78. <tr>
  79.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  80.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  81.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  82.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  83.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  84. </tr>
  85. <tr>
  86.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  87.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  88.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  89.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  90.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  91. </tr>
  92. <tr>
  93.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  94.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  95.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  96.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  97.     <td><input type = "text" size = "8" readonly = "readonly" /></td>
  98. </tr>
  99. <tr>
  100.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  101.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  102.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  103.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  104.     <td><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  105. </tr>
  106. </table>
  107.  
  108. <input type = "button" onclick = "scrolldown()" value = "Next 10">
  109. <input type = "button" value = "Show Records">
  110. <input type = "button" onclick = "scrolldown()" value = "Last 10">
  111.  
May 25 '07 #1
3 2340
acoder
16,027 Expert Mod 8TB
Give the table cells ids such as ProdCode1, Quantity1, UnitPrice1, ... ProdCode2, Quantity2, etc.

Then in your function, set the values using:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('ProdCode'+i).innerHTML = arr[...][0];
etc.
May 26 '07 #2
Hi guys,

I've tried the above suggestions but it seens i'm still not getting any luck getting the details from the file into my form. Below is the data I want to put into my input text boxes. If I have to i'll just put in 5 colums of 50 text boxes but i'd like to do it in groups of 10.

Expand|Select|Wrap|Line Numbers
  1.  
  2. anthologies=new Array();
  3. anthologies[0]=new Array("HWS015","Evening",55.59);
  4. anthologies[1]=new Array("HWS029","Georgian Romances",19.80);
  5. anthologies[2]=new Array("HWS045","The Dark Ages",23.18);
  6. anthologies[3]=new Array("HWS057","Elfen Folk",57.75);
  7. anthologies[4]=new Array("HWS074","Televised Poetry",13.15);
  8. anthologies[5]=new Array("HWS103","Spring",54.39);
  9. anthologies[6]=new Array("HWS110","Gardens by moonlight",17.46);
  10. anthologies[7]=new Array("HWS130","Rambling Reminiscences",31.62);
  11. anthologies[8]=new Array("HWS149","Flight",33.31);
  12. anthologies[9]=new Array("HWS166","Ocean View",14.00);
  13. etc.. etc. etc.
  14.  
Above this is a file, book.js.
In this file is an array.
There are 5 colums of data.
The data is for 3 columns. The other columns will be set by me as I calculate the raw data.

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <form name = "anthologies" method = "post" action = "" src = "books.js">
  4.  
  5. <script type="text/ecmascript">
  6. var topofPage = 0;
  7. topofPage > 12;  numoflines = 12
  8. </script>
  9.  
  10. <script type="text/ecmascript">
  11. function refill();
  12.  
  13. //var topofpage = 0;
  14. //for (0; numoflines; a++); 
  15. //document.forms[0].elements[5*a].value=anthologies[a+topofpage][0];
  16. //document.forms[1].elements[5*a+1].value=anthologies[a+topofpage][1];
  17. //document.forms[2].elements[5*a+2].value=anthologies[a+topofpage][2];
  18. //document.forms[3].elements[5*a+3].value=anthologies[a+topofpage][3];
  19. //document.forms[4].elements[5*a+4].value=anthologies[a+topofpage][4];
  20. </script>
  21.  
  22. <script type = "text/ecmascript" src = "books.js">
  23. <![CDATA[
  24. document.getElementById('prodCode1'+i).innerHTML = arr[anthologies][0];
  25. document.getElementById('prodCode2'+i).innerHTML = arr[anthologies][1];
  26. document.getElementById('prodCode3'+i).innerHTML = arr[anthologies][2];
  27. document.getElementById('prodCode4'+i).innerHTML = arr[anthologies][3];
  28. document.getElementById('prodCode5'+i).innerHTML = arr[anthologies][4];
  29. document.getElementById('prodCode6'+i).innerHTML = arr[anthologies][5];
  30. document.getElementById('prodCode7'+i).innerHTML = arr[anthologies][6];
  31. document.getElementById('prodCode8'+i).innerHTML = arr[anthologies][7];
  32. document.getElementById('prodCode9'+i).innerHTML = arr[anthologies][8];
  33. document.getElementById('prodCode10'+i).innerHTML = arr[anthologies][9];
  34. //]]>
  35. </script>
  36. <script type = "text/ecmascript" src = "books.js">
  37. <![CDATA[
  38. document.getElementById('bookTitle1'+i).innerHTML = arr[anthologies][0];
  39. document.getElementById('bookTitle2'+i).innerHTML = arr[anthologies][1];
  40. document.getElementById('bookTitle3'+i).innerHTML = arr[anthologies][2];
  41. document.getElementById('bookTitle4'+i).innerHTML = arr[anthologies][3];
  42. document.getElementById('bookTitle5'+i).innerHTML = arr[anthologies][4];
  43. document.getElementById('bookTitle6'+i).innerHTML = arr[anthologies][5];
  44. document.getElementById('bookTitle7'+i).innerHTML = arr[anthologies][6];
  45. document.getElementById('bookTitle8'+i).innerHTML = arr[anthologies][7];
  46. document.getElementById('bookTitle9'+i).innerHTML = arr[anthologies][8];
  47. document.getElementById('bookTitle10'+i).innerHTML = arr[anthologies][9];
  48. //]]>
  49. </script>
  50. <script type = "text/ecmascript" src = "books.js">
  51. <![CDATA[
  52. document.getElementById('author1'+i).innerHTML = arr[anthologies][0];
  53. document.getElementById('author2'+i).innerHTML = arr[anthologies][1];
  54. document.getElementById('author3'+i).innerHTML = arr[anthologies][2];
  55. document.getElementById('author4'+i).innerHTML = arr[anthologies][3];
  56. document.getElementById('author5'+i).innerHTML = arr[anthologies][4];
  57. document.getElementById('author6'+i).innerHTML = arr[anthologies][5];
  58. document.getElementById('author7'+i).innerHTML = arr[anthologies][6];
  59. document.getElementById('author8'+i).innerHTML = arr[anthologies][7];
  60. document.getElementById('author9'+i).innerHTML = arr[anthologies][8];
  61. document.getElementById('author10'+i).innerHTML = arr[anthologies][9];
  62. //]]>
  63. </script>
  64. <script type = "text/ecmascript" src = "books.js">
  65. <![CDATA[
  66. document.getElementById('qty1'+i).innerHTML = arr[anthologies][0];
  67. document.getElementById('qty2'+i).innerHTML = arr[anthologies][1];
  68. document.getElementById('qty3'+i).innerHTML = arr[anthologies][2];
  69. document.getElementById('qty4'+i).innerHTML = arr[anthologies][3];
  70. document.getElementById('qty5'+i).innerHTML = arr[anthologies][4];
  71. document.getElementById('qty6'+i).innerHTML = arr[anthologies][5];
  72. document.getElementById('qty7'+i).innerHTML = arr[anthologies][6];
  73. document.getElementById('qty8'+i).innerHTML = arr[anthologies][7];
  74. document.getElementById('qty9'+i).innerHTML = arr[anthologies][8];
  75. document.getElementById('qty10'+i).innerHTML = arr[anthologies][9];
  76. //]]>
  77. </script>
  78. <script type = "text/ecmascript" src = "books.js">
  79. <![CDATA[
  80. document.getElementById('unitP1'+i).innerHTML = arr[anthologies][0];
  81. document.getElementById('unitP2'+i).innerHTML = arr[anthologies][1];
  82. document.getElementById('unitP3'+i).innerHTML = arr[anthologies][2];
  83. document.getElementById('unitP4'+i).innerHTML = arr[anthologies][3];
  84. document.getElementById('unitP5'+i).innerHTML = arr[anthologies][4];
  85. document.getElementById('unitP6'+i).innerHTML = arr[anthologies][5];
  86. document.getElementById('unitP7'+i).innerHTML = arr[anthologies][6];
  87. document.getElementById('unitP8'+i).innerHTML = arr[anthologies][7];
  88. document.getElementById('unitP9'+i).innerHTML = arr[anthologies][8];
  89. document.getElementById('unitP10'+i).innerHTML = arr[anthologies][9];
  90. //]]>
  91. </script>
  92.  
  93.  
  94. <script type = "text/ecmascript">
  95. function scrolldown ();
  96. {{
  97. topofpage+=12;
  98. }
  99. }
  100. </script>
  101.  
  102. <!--Customer Details
  103.  
  104. enter name, address, post code, date of birth and credit card type and numbe
  105.  
  106.  -->
  107.  
  108. <table border = "1">
  109. <tr>
  110.     <td>Product Code</td>
  111.     <td>Title</td>
  112.     <td>Author</td>
  113.     <td>Quantity</td>
  114.     <td>Unit Price</td>
  115. </tr>
  116. <tr>
  117.     <td id = "prodCode1"><input type = "text" size = "8" readonly = "readonly" /></td>
  118.     <td id = "bookTitle1"><input type = "text" size = "8" readonly = "readonly" /></td>
  119.     <td id = "author1"><input type = "text" size = "8" readonly = "readonly" /></td>
  120.     <td id = "qty1"><input type = "text" size = "8" readonly = "readonly" /></td>
  121.     <td id = "unitP1"><input type = "text" size = "8" readonly = "readonly" /></td>
  122. </tr>
  123. <tr>
  124.     <td id = "prodCode2"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  125.     <td id = "bookTitle2"><input type = "text" size = "8" readonly = "readonly" /></td>
  126.     <td id = "author2"><input type = "text" size = "8" readonly = "readonly" /></td>
  127.     <td id = "qty2"><input type = "text" size = "8" readonly = "readonly" /></td>
  128.     <td id = "unitP2"><input type = "text" size = "8" readonly = "readonly" /></td>
  129. </tr>
  130. <tr>
  131.     <td id = "prodCode3"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  132.     <td id = "bookTitle3"><input type = "text" size = "8" readonly = "readonly" /></td>
  133.     <td id = "author3"><input type = "text" size = "8" readonly = "readonly" /></td>
  134.     <td id = "qty3"><input type = "text" size = "8" readonly = "readonly" /></td>
  135.     <td id = "unitP3"><input type = "text" size = "8" readonly = "readonly" /></td>
  136. </tr>
  137. <tr>
  138.     <td id = "prodCode4"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  139.     <td id = "bookTitle4"><input type = "text" size = "8" readonly = "readonly" /></td>
  140.     <td id = "author4"><input type = "text" size = "8" readonly = "readonly" /></td>
  141.     <td id = "qty4"><input type = "text" size = "8" readonly = "readonly" /></td>
  142.     <td id = "unitP4"><input type = "text" size = "8" readonly = "readonly" /></td>
  143. </tr>
  144. <tr>
  145.     <td id = "prodCode5"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  146.     <td id = "bookTitle5"><input type = "text" size = "8" readonly = "readonly" /></td>
  147.     <td id = "author5"><input type = "text" size = "8" readonly = "readonly" /></td>
  148.     <td id = "qty5"><input type = "text" size = "8" readonly = "readonly" /></td>
  149.     <td id = "unitP5"><input type = "text" size = "8" readonly = "readonly" /></td>
  150. </tr>
  151. <tr>
  152.     <td id = "prodCode6"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  153.     <td id = "bookTitle6"><input type = "text" size = "8" readonly = "readonly" /></td>
  154.     <td id = "author6"><input type = "text" size = "8" readonly = "readonly" /></td>
  155.     <td id = "qty6"><input type = "text" size = "8" readonly = "readonly" /></td>
  156.     <td id = "unitP6"><input type = "text" size = "8" readonly = "readonly" /></td>
  157. </tr>
  158. <tr>
  159.     <td id = "prodCode7"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  160.     <td id = "bookTitle7"><input type = "text" size = "8" readonly = "readonly" /></td>
  161.     <td id = "author7"><input type = "text" size = "8" readonly = "readonly" /></td>
  162.     <td id = "qty7"><input type = "text" size = "8" readonly = "readonly" /></td>
  163.     <td id = "unitP7"><input type = "text" size = "8" readonly = "readonly" /></td>
  164. </tr>
  165. <tr>
  166.     <td id = "prodCode8"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  167.     <td id = "bookTitle8"><input type = "text" size = "8" readonly = "readonly" /></td>
  168.     <td id = "author8"><input type = "text" size = "8" readonly = "readonly" /></td>
  169.     <td id = "qty8"><input type = "text" size = "8" readonly = "readonly" /></td>
  170.     <td id = "unitP8"><input type = "text" size = "8" readonly = "readonly" /></td>
  171. </tr>
  172. <tr>
  173.     <td id = "prodCode9"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  174.     <td id = "bookTitle9"><input type = "text" size = "8" readonly = "readonly" /></td>
  175.     <td id = "author9"><input type = "text" size = "8" readonly = "readonly" /></td>
  176.     <td id = "qty9"><input type = "text" size = "8" readonly = "readonly" /></td>
  177.     <td id = "unitP9"><input type = "text" size = "8" readonly = "readonly" /></td>
  178. </tr>
  179. <tr>
  180.     <td id = "prodCode10"><input type = "text" name = "" size = "8" readonly = "readonly" /></td>
  181.     <td id = "bookTitle10"><input type = "text" size = "8" readonly = "readonly" /></td>
  182.     <td id = "author10"><input type = "text" size = "8" readonly = "readonly" /></td>
  183.     <td id = "qty10"><input type = "text" size = "8" readonly = "readonly" /></td>
  184.     <td id = "unitP10"><input type = "text" size = "8" readonly = "readonly" /></td>
  185. </tr>
  186. </table>
  187.  
  188.  
What I'm really missing is the JavaScript picking up the data in these input boxes so I can then calculate them. Obviously i'll need to remove some of the readonly elements later when i want to make calculations, I just need some wisdom on what I am missing when it comes to actually displaying the data in the array.

Thanks in advance, all.
May 27 '07 #3
acoder
16,027 Expert Mod 8TB
First of all, set the ids to the textboxes instead of the tds (table cells). Then you can use "value" instead of innerHTML.

You can replace the 50 or so repeated lines (22-87) by just 5-6 lines using a loop:
Expand|Select|Wrap|Line Numbers
  1.  
  2. for (i = 0; i < 10; i++) {
  3.   document.getElementById('prodCode'+i).value = anthologies[topofpage+i][0];
  4.   document.getElementById('bookTitle'+i).value = anthologies[topofpage+i][1];
  5.   document.getElementById('author'+i).value = anthologies[topofpage+i][2];
  6.   document.getElementById('qty'+i).value = something;
  7.   document.getElementById('unitP'+i).value = something;
  8. }
  9.  
Also, get id of the src attribute for the script tag. Make sure the function is defined properly:
Expand|Select|Wrap|Line Numbers
  1. function (args) {
  2. ...//function body
  3. }
  4.  
May 28 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by Nathan Rose | last post: by
61 posts views Thread by Toby Austin | last post: by
1 post views Thread by Michael Hill | last post: by
117 posts views Thread by phil-news-nospam | last post: by
22 posts views Thread by guitarromantic | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.