title: How do I get the value of type input inside a table cell?
body: <p>I have the following table:</p>
  
  <pre><code>&lt;tbody id="TableBodyId"&gt;
    &lt;tr&gt;
      &lt;td&gt;First Value&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" size="5" value="Second Value"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>I want to know how I can extract both the <code>first value</code> and the <code>second value</code> using either <code>JS</code> or <code>Jquery</code>. Previously, my table looked like this:</p>
  
  <pre><code>&lt;tbody id="TableBodyId"&gt;
    &lt;tr&gt;
      &lt;td&gt;First Value&lt;/td&gt;
      &lt;td&gt;Second Value&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>And to get the values, I did this using <code>jQuery</code>:</p>
  
  <pre><code>var TableData = new Array();
  
  $('#TableBodyId tr').each(function(row, tr)
  {
      TableData[row] = {
          "firstValue" : $(tr).find('td:eq(0)').text(),
          "secondValue": $(tr).find('td:eq(1)').text()
      }
  });
  </code></pre>
  
  <p>Then, I decided that I want to be able to change the values in the second cell, so I made it into:</p>
  
  <pre><code>&lt;input type="text" size="5" value="Second Value"/&gt;
  </code></pre>
  
  <p>The problem now, is that the <code>tableData</code> on second cell is <code>""</code> (in other words, blank). To solve this, I tried to do:</p>
  
  <pre><code>"firstValue": $(tr).find('td:eq(0)').text(),
  "secondValue": $(tr).find('td:eq(1)').val()
  </code></pre>
  
  <p>But no luck, Second Value still comes up as <code>""</code>. Any ideas on how to solve this?</p>