在数据表中添加HTML标记添加行

debugcn 发表于 Dev

妈妈Konz

我想在数据表中实现动态添加，但是不知何故我无法通过在新添加的行内添加html标记并使选择数据不显示的方式使其工作。

这是我的js，

    $('#productselect').each(function(index, value){
        var initSelectpicker = $(this).selectpicker();
        $.getJSON('../../../html/data/productlist.php', function(data){

            initSelectpicker.html('');
            $.each(data, function(key, val){
                initSelectpicker.append('<option value="' + val["prod_desc"] + '">'+ val["prod_desc"] + '</option>');
            });
            initSelectpicker.selectpicker('refresh');
        });
    }); //end flightselect
$(document).ready(function() {
    var t = $('#example').DataTable();
    var counter = 1;

    $('#addRow').on( 'click', function () {
        t.row.add([
            counter +'.1',
            "<select class='form-control' id='productselect' data-live-search='true'>",
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ]).draw( false );

        counter++;
    } );

    // Automatically add a first row of data
    $('#addRow').click();
} );

洛根·韦恩（Logan Wayne）

仅在首次加载页面时才会调用脚本的第一部分。这就是为什么select字段中包含来自选项的原因productlist.php。

因此，当您尝试添加更多行时，新的选择字段将没有任何选项。您可以做的是productlist.php在尝试添加新行时调用。

$(document).ready(function() {

    var t = $('#example').DataTable();
    var counter = 1;

    $(document).on('click', '#addRow', function () {

        /*** GET ALL OPTIONS ***/
        $.getJSON('../../../html/data/productlist.php', function(data){
            var newoptions = '';
            $.each(data, function(key, val){
                newoptions .= '<option value="' + val["prod_desc"] + '">'+ val["prod_desc"] + '</option>';
            });
        });

        t.row.add([
            counter +'.1',
            '<select class="form-control" id="productselect" data-live-search="true">'+newoptions+'</select>',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ]).draw( false );

        counter++;
    });

    // Automatically add a first row of data
    $('#addRow').click();
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。