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唯一解决问题的方法：

format="%d/%m/%Y %H:%M:%OS"

Answer 3

在添加单元格后，您可以将每个新生成的$（＆＃39;＆lt; tr＆gt;＆＃39;）推送到脚本顶部的行数组中。
通过这种方式，您可以遍历数组，找出某人放入字段的值，甚至更改每行的上限或其他值。

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/

如何读取动态表的值

3 个答案: