Display data from input fields in a table format

Question

I'm trying to display the input data in a table format. The issue I'm having now is the display table will show the last data that was input.

HTML:

<table>
  <thead>
        <tr>
    <th>Name</th>
            <th>Value 1</th>
            <th>Value 2</th>
        </tr>
    </thead>
    <tbody>
    <tr>
      <td>Topic1</td>
      <td><input type="text" class="Value_One"/></td>
      <td><input type="text" class="Value_Two"/></td>
    </tr>  
        <tr>
      <td>Topic2</td>
          <td><input type="text" class=" Value_One"></td>
      <td><input type="text" class=" Value_Two"></td>
        </tr>
    </tbody>
</table>
<br/>
<table>
  <thead>
    <tr>    
      <th>Name</th>                                     
      <th>Value 1 </th>
      <th>Value 2</th>          
        </tr>
    </thead>
  <tbody>
      <tr>
            <td class="name">Topic1 </td>
      <td class="value_1"></td>
      <td class="value_2"></td>
    </tr>
    <tr>
            <td class="name">Topic2</td>
      <td class="display_value_1"></td>
      <td class="display_value_2"></td>
      </tr>                         
  </tbody>
</table>

jQuery:

$(document).ready(function() {
  $('input.Value_One').on('keyup change', function() {
    $('td.display_value_1').text($(this).val());
  });

  $('input.Value_Two').on('keyup change', function() {
    $('td.display_value_2').text($(this).val());
  });
});

EX 1 : Input Table

Name    Value 1   Value 2
Topic1  1         100
Topic2

Results Display Table

Name    Value 1   Value 2
Topic1  1         100
Topic2  1         100

EX 2 : Input Table

Name    Value 1   Value 2
Topic1  1         100
Topic2  2         200

Results Display Table

Name    Value 1   Value 2
Topic1  2         200
Topic2  2         200

Desired Result:

Name    Value 1   Value 2
Topic1  1         100
Topic2  2         200

JSFiddle https://jsfiddle.net/bhfhd4yr/18/

Looks like a few things are up with your class names. you have two listeners but four fields.... — deweyredman
– deweyredman, Commented Jan 5, 2017 at 23:05
@deweyredman is right. you have to update your listeners ... https://jsfiddle.net/bhfhd4yr/20/ — Martin E
– Martin E, Commented Jan 5, 2017 at 23:11

Ori Drori · Accepted Answer · 2017-01-06 22:48:45Z

2

Assign the same class to the inputs. Use the class to select all inputs ($inputs). Assign the same class to the target cells. Use the class to select all target cells ($values). Whenever an event handler of an input is fired, find the input's index in $inputs using .index(). Use the index to assign the current input value to the corresponding table cell in $values:

var $inputs = $('.input');
var $values = $('.value');

$inputs.on('keyup change', function() {
  var $this = $(this);
  var idx = $inputs.index($this);
  var value = $this.val();

  $values.eq(idx).text(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Value 1</th>
      <th>Value 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Topic1</td>
      <td>
        <input type="text" class="input" />
      </td>
      <td>
        <input type="text" class="input" />
      </td>
    </tr>
    <tr>
      <td>Topic2</td>
      <td>
        <input type="text" class="input">
      </td>
      <td>
        <input type="text" class="input">
      </td>
    </tr>
  </tbody>
</table>


<br/>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Value 1</th>
      <th>Value 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="name">Topic1</td>
      <td class="value"></td>
      <td class="value"></td>
    </tr>
    <tr>
      <td class="name">Topic2</td>
      <td class="value"></td>
      <td class="value"></td>
    </tr>
  </tbody>
</table>

edited Jan 6, 2017 at 22:48

answered Jan 5, 2017 at 23:08

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jashuang1130 Over a year ago

I ended up adding a second input table and result table. it worked perfectly. Thanks!!

Ori Drori Over a year ago

You're welcome :) If you've got many and / or large tables, instead of adding an event listener to each input, consider event delegation.

deweyredman · Accepted Answer · 2017-01-05 23:13:46Z

You need more unique identifiers for your fields...check my updated fiddle here: https://jsfiddle.net/bhfhd4yr/19/.

This can most certainly be cleaned up and optimized, but the issue is you were targeting two classes, while expecting four different fields to be unique. I'm sure you could make a common listener if you restructured your code a bit.

Cleaned it up a bit more here: https://jsfiddle.net/bhfhd4yr/21/ HTML:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Value 1</th>
            <th>Value 2</th>
        </tr>
    </thead>
    <tbody>
    <tr>
      <td>Topic1</td>
      <td><input type="text" class="value_1"/></td>
      <td><input type="text" class="value_2"/></td>
    </tr>  
    <tr>
      <td>Topic2</td>
      <td><input type="text" class="value_3"></td>
      <td><input type="text" class="value_4"></td>
    </tr>
    </tbody>
</table>


<br/>
<table>
  <thead>
    <tr>    
      <th>Name</th>                                     
      <th>Value 1 </th>
      <th>Value 2</th>          
    </tr>
    </thead>
  <tbody>
    <tr>
      <td class="name">Topic1 </td>
      <td class="value_1"></td>
      <td class="value_2"></td>
    </tr>
    <tr>
      <td class="name">Topic2</td>
      <td class="value_3"></td>
      <td class="value_4"></td>
      </tr>                         
  </tbody>
</table>

JS:

$(document).ready(function() {
  $('input').on('keyup change', function() {
    $('td.'+$(this).attr("class")).text($(this).val());
  });
});

Collectives™ on Stack Overflow

Display data from input fields in a table format

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related