title: Invisible/visible submit button in a table
body: <p>I have table with 2 rows. The rows contains a text box and a submit button.</p>
  
  <p>Question:</p>
  
  <p>When the user clicks the text box then the submit button should be visible.How can I do it.
  I tried using the closest function but it does not work.</p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;table id="table1"&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="validate" style="display:none"/&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="validate" style="display:none"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <p>$(document).ready(function(){</p>
  
  <pre><code>    $( "#table1" ).on( "click", "input:text", function( event ) {
          var parent = $(this).closest('td').show();
          alert('Clicked')
      })
  </code></pre>
  
  <p>})</p>
  
  <p><a href="http://jsfiddle.net/92HHG/1/" rel="nofollow">http://jsfiddle.net/92HHG/1/</a></p>