Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

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

Member
  
Join Date: Mar 2007
Posts: 33
#1: May 25 '07
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.  

acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: May 26 '07

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

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.
Member
  
Join Date: Mar 2007
Posts: 33
#3: May 27 '07

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

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.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: May 28 '07

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

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.  
Reply

« previous question | next question »

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved