以表格格式显示来自输入字段的数据答案

【问题标题】：Display data from input fields in a table format以表格格式显示来自输入字段的数据
【发布时间】：2023-03-13 05:47:01
【问题描述】：

我正在尝试以表格格式显示输入数据。我现在遇到的问题是显示表将显示最后输入的数据。

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：输入表

Name    Value 1   Value 2
Topic1  1         100
Topic2

结果展示表

Name    Value 1   Value 2
Topic1  1         100
Topic2  1         100

EX 2：输入表

Name    Value 1   Value 2
Topic1  1         100
Topic2  2         200

结果展示表

Name    Value 1   Value 2
Topic1  2         200
Topic2  2         200

期望的结果：

Name    Value 1   Value 2
Topic1  1         100
Topic2  2         200

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

【问题讨论】：

看起来您的班级名称有些问题。你有两个听众，但有四个字段....
@deweyredman 是对的。你必须更新你的听众...https://jsfiddle.net/bhfhd4yr/20/

标签： javascript jquery html input html-table

【解决方案1】：

为输入分配相同的类。使用该类选择所有输入 ($inputs)。将相同的类分配给目标单元格。使用该类选择所有目标单元格 ($values)。每当触发输入的事件处理程序时，使用.index() 在$inputs 中查找输入的索引。使用索引将当前输入值赋给$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>

【讨论】：

我最终添加了第二个输入表和结果表。它工作得很好。谢谢！！
不客气 :) 如果您有很多和/或大型表，请考虑事件委托，而不是为每个输入添加事件侦听器。

【解决方案2】：

您的字段需要更多唯一标识符...在此处查看我更新的小提琴：https://jsfiddle.net/bhfhd4yr/19/。

这当然可以清理和优化，但问题是您针对两个类，同时期望四个不同的字段是唯一的。如果你稍微重构一下你的代码，我相信你可以做一个通用的监听器。

在这里稍微清理一下： 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());
  });
});

【讨论】：