Question

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

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/

Answer 1

您的字段需要更多唯一标识符...请在此处查看我的更新小提琴：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());
  });
});

Answer 2

将相同的类分配给输入。使用该类选择所有输入（$inputs）。将相同的类分配给目标单元格。使用该类选择所有目标单元格（$values）。每当触发输入的事件处理程序时，使用.index()在$inputs中查找输入的索引。使用索引将当前输入值分配给$values中的相应表格单元格：

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

以表格格式显示输入字段中的数据

2 个答案: