如何读取动态表的值

Question

I have a table dynamically expanded via javascript. The values are filenames. How do I read each of the values and display to the user?

 newRow.append(cols);

 $(document).ready(function () { var counter = 0; $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; // cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>'; cols += '<td><div class="input-group input-file" name="Fichier1">'; cols += '<span class="input-group-btn">'; cols += ' <button class="btn btn-default btn-choose" type="button">Choose</button>'; cols += '</span>'; cols += '<input type="text" class="form-control" placeholder=Chooseafile />'; cols += '<span class="input-group-btn">'; cols += ' <button class="btn btn-warning btn-reset" type="button">Reset</button> </span>'; cols += '</div></td>'; // cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>'; // cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>'; cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>'; newRow.append(cols); $("table.order-list").append(newRow); counter++; }); $("table.order-list").on("click", ".ibtnDel", function (event) { $(this).closest("tr").remove(); counter -= 1; }); }); function showfnames() { $(".input-ghost").each(function(i){ var file=$(this); console.log(file); }) } function calculateRow() { var price = +row.find('input[name^="price"]').val(); } function calculateGrandTotal() { var grandTotal = 0; $("table.order-list").find('input[name^="price"]').each(function () { grandTotal += +$(this).val(); }); $("#grandtotal").text(grandTotal.toFixed(2)); } ////////////////////// function bs_input_file() { $(".input-file").before( function() { if ( ! $(this).prev().hasClass('input-ghost') ) { var element = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>"); element.attr("name",$(this).attr("name")); element.change(function(){ element.next(element).find('input').val((element.val()).split('\\\\').pop()); }); $(this).find("button.btn-choose").click(function(){ element.click(); }); $(this).find("button.btn-reset").click(function(){ element.val(null); $(this).parents(".input-file").find('input').val(''); }); $(this).find('input').css("cursor","pointer"); $(this).find('input').mousedown(function() { $(this).parents('.input-file').prev().click(); return false; }); return element; } } ); } $(function() { bs_input_file(); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <div class="container"> <table id="myTable" class=" table order-list" border> <thead> <tr> <td>filename</td> </tr> </thead> <tbody> <tr> <td class="col-sm-4"> <div class="input-group input-file" name="Fichier1"> <span class="input-group-btn"> <button class="btn btn-default btn-choose" type="button">Choose</button> </span> <input type="text" class="form-control" placeholder='Choose a file...' /> <span class="input-group-btn"> <button class="btn btn-warning btn-reset" type="button">Reset</button> </span> </div> <!--input type="text" name="name" class="form-control" /--> </td> <td class="col-sm-2"><a class="deleteRow"></a> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" /> <input type="button" class="btn btn-lg btn-block " id="showvals" value="showFilenames"/> </td> </tr> <tr> </tr> </tfoot> </table> </div> 

Here is a jsfiddle showing the button I need working https://jsfiddle.net/syLhe2sg/8/

Answer 1

You can fetch the names of the selected files likewise:

$("#showvals").on("click", function() {
    var values = [];
    var elements = $(".form-control");
    for(var i = 0; i < elements.length; i++) values.push(elements.get(0).value)
}

How you choose to display them is your graphical choice.

Answer 2

Javascript only solution to the problem:

var files = document.getElementsByClassName("form-control");
for (i=0;i<files.length;i++) {
  var filename = files[i].value;
  console.log(filename); //Or copying it to another var
}

Answer 3

You could push every newly generated $('<tr>') into an array of rows on the top of your script after you appended the cells.
This way you can afterwards iterate over the array to find out the values someone put into the fields and even change the appereance or other value of each row.

var rows = [];

var r1 = $('<div>');
r1.append('Yay1');
rows.push(r1);
$('#rows').append(r1);

var r2 = $('<div>');
r2.append('Yay2');
rows.push(r2);
$('#rows').append(r2);

var r3 = $('<div>');
r3.append('Yay3');
rows.push(r3);
$('#rows').append(r3);

$(rows[0]).css('color', 'red');
$(rows[2]).css('color', 'blue');

//value == 'Yay2'
var value = $(rows[1]).html();

$.each(rows, function(i, row) {
    $('#rows').append('    Row ' + i + ': ' + row.html());
});

See this fiddle for reference: https://jsfiddle.net/ooxf9poo/2/