title: Jquery change row in table
body: <p>My code <a href="http://jsfiddle.net/Vds69/" rel="nofollow">http://jsfiddle.net/Vds69/</a>  I want to change current row in a table with new value, if I click on the button at the end of the row. Please help me to write action to change row</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row-fluid"&gt;                            
      &lt;div class="btn-group"&gt;
          &lt;button class="btn btn-primary action-add-visual-feature"&gt; + new visual feature &lt;/button&gt;
          &lt;button class="btn btn-danger action-remove-visual-features"&gt; Remove all features&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('.action-remove-visual-features').on('click', function() {
      console.log("action-remove-visual-features");
      $('#table-visual-features tbody').html('');
  });
  
  $('.action-add-visual-feature').on('click', function() { 
      console.log("action-add-visual-feature");  
  
      $('#table-visual-features tbody').append('&lt;tr&gt;&lt;td&gt;x&lt;/td&gt;&lt;td&gt;Numeric&lt;/td&gt;&lt;td&gt;Values to be mapped to the x-axis&lt;/td&gt;&lt;td&gt;&lt;button class="action-change"&gt;edit&lt;/button&gt; &lt;button class="btn btn-mini btn-danger action-remove-visual-feature"&gt;remove&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
  });
  
  
  $('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
      console.log("action-remove-visual-feature!!");
      console.log("e action  = ", e);
      $(this).parents('tr').remove();
  });
  </code></pre>