javascript - jQuery:将动态生成的输入值放入span/div

我正在尝试创建用于动态生成输入的打印表格。
字段的内容稍后在PreviewDiv中显示。
只要我指定应该在哪里，它就可以正常工作，例如：

$('#Prw_CapacityA_1').text($('#CapacityA_1').val());
$('#Prw_CapacityB_1').text($('#CapacityB_1').val());
$('#Prw_CapacityC_1').text($('#CapacityC_1').val());

但是，如果用户创建100个字段，这将需要编写大量代码。
必须有其他方法可以动态地解决此问题，例如：

$('#Prw_CapacityA_'+ counter).text($('#CapacityA_'+ counter).val());

Here's the js fiddle

最佳答案

您可以尝试使用attribute starts with selector选择以特定ID开头的元素，然后使用each()函数遍历它们。

预览表中不需要html。您可以在用户单击预览时生成它。修改的fiddle

$('#PreviewButton').click(function(){

    var capB = $('td input[id^=CapacityB_]');
    var capC = $('td input[id^=CapacityC_]');
    var table = $("#AddFieldsToPreviewDiv");
    table.empty(); //build table everytime user previews so that previously appended values are removed
    table.append('<tr><td>ID</td><td>Text 1</td><td>Text 2</td><td>Text 3</td></tr>');

    $('td input[id^=CapacityA_]').each(function(i){
        table.append('<tr><td>#'+(i + 1)
                      +'</td><td>'+$(this).val()
                      +'</td><td>'+$(capB[i]).val()
                     +'</td><td>'+$(capC[i]).val()
                     +'</td></tr>');
    });
    // Show PreviewDiv and hide FormDiv if PreviewButton clicked
    $('#PreviewDiv').show();
    $('#FormDiv').hide();
});