title: How to grab the values from an HTML table's cells using JavaScript
body: <p>I'm trying to grab the cell values from an HTML table so that I can save them into a MySQL table via a call to PHP.  I'd like to use JavaScript rather than jQuery.</p>
  
  <p>I'm giving each TR a distinct ID based on the MySQL table's ID field.  Also, each TD input cell has a unique ID based on the MySQL table's ID field.  Not sure if I need all those, but I used them.</p>
  
  <p>How do I grab the cell's value so that I can pass it to a PHP procedure(I know how to code this PHP) to save the data into MySQL?  My JavaScript code below grabs the "innerHTML" but I need to grab the cell value's instead.</p>
  
  <p>For example, if I have 3 rows of data from a MySQL table, with fields id and amount, with values below, how do I grab the "3" and the "1.99"?:</p>
  
  <pre><code>id    amount
  -------------
  1     100.00
  2     9.99
  3     1.99
  </code></pre>
  
  <p><strong>Here is a sample of the PHP/HTML code for the table, submit button and onclick call:</strong>
  (this is a very simplified version of my actual code but should convey the idea)</p>
  
  <pre><code>&lt;?php
      /* define mysql database connect, query and execute it returning result set into $result, id=integer primary key, is_active=tinyint(0 or 1), amount=decimal(12,2) */
      /* ... */    
      /* output form/table */
      echo "&lt;form id='myform' name='myform' &gt;" ;    
          echo "&lt;table id='mytable' name='mytable'&gt;" ;
              while($row = mysql_fetch_array($result))
              {
                  $id                 = $row['id'] ;
                  $amount             = $row['amount'] ;                
                  $tr_id              = "tr_id_" . trim((string)$id) ;                                                
                  $td_id              = "td_id_" . trim((string)$id) ;  
                  $td_amount_id       = "td_amount_id_" . trim((string)$id) ;                 
                  $input_amount_id    = "input_amount_id_" . trim((string)$id) ;
                  echo "&lt;tr id='$tr_id' name='$tr_id'&gt;";
                      echo "&lt;td id='$td_id_account' &gt; $id &lt;/td&gt;" ; 
                      echo "&lt;td id='$td_amount_id' &gt; &lt;input type='text' id='$input_amount_id' value=$amount &gt; $amount &lt;/td&gt;" ;             
                  echo "&lt;/tr&gt;";
              }
          echo "&lt;/table&gt;";
      echo "&lt;/form&gt;" ; 
      /* submit button and onclick call */
      echo "&lt;br /&gt;" ;
      echo "&lt;table&gt;";
          echo "&lt;tr&gt;" ;
              echo "&lt;td&gt;";
                  echo "&lt;button type='button' " . 'onclick="SubmitTableData(\'' . "mytable" .'\');"' . "&gt;Submit&lt;/button&gt;" ;
              echo "&lt;/td&gt;" ;
          echo "&lt;/tr&gt;";
      echo "&lt;/table&gt;";         
  ?&gt;
  </code></pre>
  
  <p><strong>And here is a sample of my JavaScript function used to loop through the rows of the HTML table:</strong></p>
  
  <pre><code>function SubmitTableData(TableID)
  {
      var table = document.getElementById(TableID);
      for (var i = 0, row; row = table.rows[i]; i++) 
      {
         // iterate through rows
         for (var j = 0, col; col = row.cells[j]; j++) 
         {
           // iterate through columns
              alert(col.innerHTML);
         }  
         /* call PHP procedure with row's cell values as parameters */
         /* ... */
         break;
      }
  } 
  </code></pre>