入力フィールドのデータを表形式で表示

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

は、入力に同じクラスを割り当てます。クラスを使用してすべての入力を選択します（$inputs）。同じクラスをターゲットセルに割り当てます。クラスを使用して、すべてのターゲットセル（$values）を選択します。入力のイベントハンドラが起動されると、$inputsの入力インデックスを.index()で検索します。 $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>

Answer 2

あなたのフィールドに固有の識別子がもっと必要です...ここに更新されたフィドルを確認してください：https://jsfiddle.net/bhfhd4yr/19/。

これは最も確実にクリーンアップと最適化が可能ですが、2つのクラスを対象にしていて、4つの異なるフィールドが一意であることが予想されます。私はあなたのコードを少し再構成すれば、共通のリスナーを作ることができると確信しています。以上、ここで少しそれをクリーンアップ

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