0

jquery と bootstrap-jasny を使用して、動的な行挿入を作成しました。

コードはこちら

html:

<table id="internalTbl">
    <tr><td><div class="fileinput fileinput-new" data-provides="fileinput"> <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span>
    <input type="file" name="name">
    </span> <span class="fileinput-filename"></span>
 <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
    <input type="text" name="namehidden" />
        </td></tr>
</table>
        <button id="addInternal"> add </button>

JavaScript:

    // add new row to internal listing table
    $("#addInternal").click(function() {
        $("#internalTbl").each(function () {
            var tds = '<tr>';
            $.each($('tr:last td', this), function () {
                tds += '<td>' + $(this).html() + '</td>';
            });
            tds += '</tr>';

            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });

        // clear the last file input field
        $("#internalTbl tr:last .fileinput").fileinput('clear');
    });

サブシーケンスでは、ファイル名をテキスト ボックスに割り当てることができません。

4

1 に答える 1

0

動的に追加された fileinput の変更イベントを委任する必要があります。デリゲートの詳細。以下のコードは、クラスを持つ将来の要素に変更イベントを添付します.fileinput

$(document).on('change.bs.fileinput', '.fileinput', function (e) {
    var filename = $(this).closest('tr').find('.fileinput-filename').text();
    $(this).closest('tr').find('input[type="text"]').val(filename);
});

また、私は2つの追加方法を使用しました.1つはクリックでtrsとtdsを手動で作成し、他のクローンは最初のtrを複製してテーブルに追加します。どれでも使えます。

var fileinput = $('#internalTbl tr td:eq(0)').html();
var td = '<td>'+fileinput+'</td>';
var tr ='<tr>'+ td+'</tr>';


$("#addInternal").click(function () {
    $("#internalTbl tbody").append(tr);
    $("#internalTbl tr:last .fileinput").fileinput('clear');
});

$("#addInternal2").click(function () {  
    var cloned_elem = $('#internalTbl tr:first').clone();
    $("#internalTbl tbody").append(cloned_elem);
    $("#internalTbl tr:last .fileinput").fileinput('clear');
});

デモフィドル

于 2015-01-03T12:03:23.633 に答える