如何讀取動態表的值

Question

我有一個通過javascript動態擴展的表格。 值是文件名。 如何讀取每個值並顯示給用戶？

 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> 

這是一個顯示我需要工作的按鈕的jsfiddle https://jsfiddle.net/syLhe2sg/8/

Answer 1

您可以同樣獲取所選文件的名稱：

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

您如何選擇顯示它們是您的圖形選擇。

Answer 2

Javascript只能解決問題：

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

附加單元格后，可以將每個新生成的$（'<tr>'）推送到腳本頂部的行數組中。
這樣，您之后便可以遍歷數組以找出有人輸入到字段中的值，甚至更改每行的外觀或其他值。

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

請參閱此提琴供參考： https : //jsfiddle.net/ooxf9poo/2/