Question

I have two text_fields and a table with three column. By clicking the button, i want that two text_field value added to the tables in the first two columns. So, the user can change the text_field values again and again and the values added to the next row by clicking the add button.

The two text_fields are as follows:

<input class="cross-reference-question-value" type="text" style="border: 1px solid gray;  ">
<input class="cross-reference-answer-value" type="text" style="border: 1px solid gray;  ">

Here is the table

<table class="gridView" id="selected_units">
  <thead>
    <tr class="gridViewHeader">
      <th>Question</th>
      <th>Answer</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody> 
    <tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %>">
      <td></td>
      <td></td>
      <td><a href="#">Delete</a></td>
    </tr>
  </tbody>
</table>

The button_link is

<a href="#" , class="button" >hello</a>

Thanks!!

Answer 1

Try starting with this:

​$('.button').click(function() {
    var question = $('.cross-reference-question-value').val();
    var answer = $('.cross-reference-answer-value').val();
    var newrow = '<tr><td>' + question + '</td><td>' + answer + '</td></tr>';
    $('#selected_units tr:last').after(newrow);
});​​​​​

Check the DEMO. Add checks for empty inputs, duplicate rows, etc.