Anzeige von Daten aus Eingabefeldern in einem Tabellenformat

Question

Ich versuche, die Eingabedaten in einem Tabellenformat anzuzeigen. Das Problem, das ich jetzt habe, ist die Anzeigetabelle zeigt die letzten Daten, die eingegeben wurden.

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

Name Value 1 Value 2 
Topic1 1   100 
Topic2   

Ergebnisse Anzeige Tabelle

Name Value 1 Value 2 
Topic1 1   100 
Topic2 1   100 

EX 2:

Eingabetabelle

Name Value 1 Value 2 
Topic1 1   100 
Topic2 2   200 

Ergebnisse Anzeige Tabelle

Name Value 1 Value 2 
Topic1 2   200 
Topic2 2   200 

Gewünschtes Ergebnis:

Name Value 1 Value 2 
Topic1 1   100 
Topic2 2   200 

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

Answer 1

die gleiche Klasse mit den Eingängen zuordnen. Verwenden Sie die Klasse, um alle Eingaben auszuwählen ($inputs). Weisen Sie den Zielzellen dieselbe Klasse zu. Verwenden Sie die Klasse, um alle Zielzellen auszuwählen ($values). Wenn ein Ereignishandler einer Eingabe ausgelöst wird, suchen Sie den Index der Eingabe in $inputs mit .index(). Verwenden Sie den Index der aktuellen Eingabewert auf die entsprechende Tabellenzelle in $values zuweisen:

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

Sie benötigen mehr eindeutige Bezeichner für Ihre Felder ... Überprüfen Sie meine aktualisierte Geige hier: https://jsfiddle.net/bhfhd4yr/19/.

Dies kann sicherlich aufgeräumt und optimiert werden, aber das Problem war, dass Sie zwei Klassen anvisierten, während Sie vier verschiedene Felder als einzigartig betrachteten. Ich bin sicher, dass Sie einen gemeinsamen Listener erstellen könnten, wenn Sie Ihren Code ein wenig umstrukturieren.

es Gereinigt hier ein bisschen mehr up: 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()); 
    }); 
});