Create HTML table using Javascript

Question

My question will ultimately be related to this site   http   dbtest net16 net ethanol-01 html  EDIT  View unencrypted page source code here     http   dbtest net16 net ethanol-22 html  This is an HTML form with results calculated using JavaScript   My goal is to display a table of 2-6 columns and variable number of rows depending on user input  form would be modified    My problem is that I am not fully understanding how to get the table created in JavaScript after the user clicks the Calculate button   I have found some potential good answers but apparently don t fully understand it all   Running the following code is somewhat like what I want my output to display    lt html gt       lt  -- http   www java2s com Tutorial JavaScript 0220  Array OutputarrayelementinaHTMLtableformat htm -- gt        lt head gt           lt title gt Table of Numbers lt  title gt       lt  head gt        lt body gt            lt h1 gt Table of Numbers lt  h1 gt            lt table border  0  gt               lt script language  javascript  type  text javascript  gt                   lt  --                  var myArray   new Array                    myArray 0    1                  myArray 1    2 218                  myArray 2    33                  myArray 3    114 94                  myArray 4    5                  myArray 5    33                  myArray 6    114 980                  myArray 7    5                   document write   lt tr gt  lt td style  width  100px  color  red   gt Col Head 1 lt  td gt                     document write   lt td style  width  100px  color  red  text-align  right   gt Col Head 2 lt  td gt                     document write   lt td style  width  100px  color  red  text-align  right   gt Col Head 3 lt  td gt  lt  tr gt                      document write   lt tr gt  lt td style  width  100px   gt --------------- lt  td gt                     document write   lt td style  width  100px  text-align  right   gt --------------- lt  td gt                     document write   lt td style  width  100px  text-align  right   gt --------------- lt  td gt  lt  tr gt                      for  var i   0  i  lt  8  i                          document write   lt tr gt  lt td style  width  100px   gt Number     i     is  lt  td gt                         myArray i    myArray i  toFixed 3                       document write   lt td style  width  100px  text-align  right   gt     myArray i      lt  td gt                         document write   lt td style  width  100px  text-align  right   gt     myArray i      lt  td gt  lt  tr gt                                           -- gt               lt  script gt           lt  table gt       lt  body gt    lt  html gt    If I can get the test table to be created and populated with my test data using my actual javascript file  then I should then be able to figure the rest myself  I think    Following are a couple of the best answers I could find so far   http   jsfiddle net drewnoakes YAXDZ   The above link originated in stackoverflow but I can t seem to find the original post at this time   http   www java2s com Tutorial JavaScript 0220  Array OutputarrayelementinaHTMLtableformat htm  Any help is appreciated   Simpler is better due to my limited experience

User · Answer

In the html file there are three input boxes with userid username department respectively    These inputboxes are used to get the input from the user   The user can add any number of inputs to the page   When clicking the button the script will enable the debugger mode   In javascript  to enable the debugger mode  we have to add the following tag in the javascript                                                                                   Tools- gt Internet Options-- gt Advanced-- gt uncheck     Disable script debugging Internet Explorer      Disable script debugging Other        lt html xmlns  http   www w3 org 1999 xhtml   gt        lt head runat  server  gt        lt title gt Dynamic Table lt  title gt        lt script language  javascript  type  text javascript  gt           lt  CDATA       function CmdAdd onclick          var newTable startTag endTag           Creating a new table      startTag   lt TABLE id  mainTable  gt  lt TBODY gt  lt TR gt  lt TD style   WIDTH  120px   gt User ID lt  TD gt       lt TD style   WIDTH  120px   gt User Name lt  TD gt  lt TD style   WIDTH  120px   gt Department lt  TD gt  lt  TR gt        endTag   lt  TBODY gt  lt  TABLE gt        newTable startTag       var trContents         Get the row contents      trContents document body getElementsByTagName  TR         if trContents length gt 1              for i 1 i lt trContents length i                if trContents i  innerHTML                 Add previous rows      newTable    lt TR gt         newTable  trContents i  innerHTML       newTable    lt  TR gt                                 Add the Latest row      newTable    lt TR gt  lt TD style   WIDTH  120px    gt             document getElementById  userid   value    lt  TD gt         newTable    lt TD style   WIDTH  120px    gt             document getElementById  username   value    lt  TD gt         newTable    lt TD style   WIDTH  120px    gt             document getElementById  department   value    lt  TD gt  lt TR gt         newTable  endTag         Update the Previous Table With New Table       document getElementById  tableDiv   innerHTML newTable                    gt        lt  script gt        lt  head gt        lt body gt        lt form id  form1  runat  server  gt        lt div gt        lt br   gt        lt label gt UserID lt  label gt         lt input id  userid  type  text    gt  lt br   gt        lt label gt UserName lt  label gt         lt input id  username  type  text    gt  lt br   gt        lt label gt Department lt  label gt         lt input id  department  type  text    gt        lt center gt        lt input id  CmdAdd  type  button  value  Add  onclick  return CmdAdd onclick      gt       lt  center gt          lt  div gt        lt div id  tableDiv  style  text-align center   gt        lt table id  mainTable  gt        lt tr style  width 120px    gt        lt td  gt User ID lt  td gt        lt td gt User Name lt  td gt        lt td gt Department lt  td gt        lt  tr gt        lt  table gt        lt  div gt        lt  form gt        lt  body gt        lt  html gt

User · Answer

The problem is that if you try to write a  lt table gt  or a  lt tr gt  or  lt td gt  tag using JS every time you insert a new tag the browser will try to close it as it will think that there is an error on the code    Instead of writing your table line by line  concatenate your table into a variable and insert it once created    lt script language  javascript  type  text javascript  gt   lt  --  var myArray      new Array        myArray 0    1      myArray 1    2 218      myArray 2    33      myArray 3    114 94      myArray 4    5      myArray 5    33      myArray 6    114 980      myArray 7    5       var myTable    lt table gt  lt tr gt  lt td style  width  100px  color  red   gt Col Head 1 lt  td gt        myTable     lt td style  width  100px  color  red  text-align  right   gt Col Head 2 lt  td gt        myTable    lt td style  width  100px  color  red  text-align  right   gt Col Head 3 lt  td gt  lt  tr gt         myTable    lt tr gt  lt td style  width  100px                      gt --------------- lt  td gt        myTable    lt td     style  width  100px  text-align  right   gt --------------- lt  td gt        myTable    lt td     style  width  100px  text-align  right   gt --------------- lt  td gt  lt  tr gt       for  var i 0  i lt 8  i          myTable    lt tr gt  lt td style  width  100px   gt Number     i     is  lt  td gt        myArray i    myArray i  toFixed 3       myTable    lt td style  width  100px  text-align  right   gt     myArray i      lt  td gt        myTable    lt td style  width  100px  text-align  right   gt     myArray i      lt  td gt  lt  tr gt             myTable    lt  table gt      document write  myTable      -- gt   lt  script gt     If your code is in an external JS file  in HTML create an element with an ID where you want your table to appear    lt div id  tablePrint  gt   lt  div gt    And in JS instead of document write myTable  use the following code   document getElementById  tablePrint   innerHTML   myTable

User · Answer

This beautiful code here creates a table with each td having array values  Not my code  but it helped me   var rows   6  cols   7   for var i   0  i  lt  rows  i           table   append   lt tr gt  lt  tr gt       for var j   0  j  lt  cols  j             table   find  tr   eq i  append   lt td gt  lt  td gt            table   find  tr   eq i  find  td   eq j  attr  data-row   i  attr  data-col   j

[javascript] Create HTML table using Javascript

Examples related to javascript

Examples related to html-table