Блог

Я пытаюсь сгенерировать таблицу с помощью jquery, а затем объединяю несколько столбцов в 1 отдельный столбец . Затем я скрываю эти столбцы, как

Обновить

Создайте таблицу и после объединения столбцов

 if (re.length > 0) {

                        $("#services_schdulue").append
                        $('#services_schdulue thead').append(
                       "<tr><th>Service ID</th><th>Service Type</th><th>Service freq</th></tr>"
                           );

                        for (var i = 0; i < re.length; i  ) {
                            if (re[i] !== null) {
                    $('#services_schdulue tbody').append('<tr><td>'   re[i][0]  
                        '</td><td>'   re[i][1]  
                         '</td><td>'   re[i][2]  '' re[i][3] '' re[i][4] 
                         '</td></tr>');    
                            }
                        }
                    }
 

Затем, когда данные отображаются в таблице, я пытаюсь извлечь данные в текстовом поле и в выпадающем списке

вот так

ОБНОВЛЕНИЕ 2

 $(function () {
            debugger;
            $('#services_schdulue').on('click', 'tr', function () {
                $("#myModal").modal("show");
                var myTable = $('#services_schdulue').DataTable();
            var row = $(this);
            //$("#txt_serv").val($(this).closest('td').children()[0]);
            debugger;

            var serv = row.find('td')[1].firstChild.data;
            $("#txt_serv").val(serv);

            var rowDate = myTable.row(this).data();
            $("#txt_repeat").val(rowDate[2]);
            });
        });
 

Вы использовали JSFiddle dataTable , который является старым способом инициализации DataTable. DataTable намного мощнее: вот как вы могли бы сделать это с помощью массивов:

 $(document).ready(function () {
    example = $("#tabledata").DataTable({
        "dom": 'Blfrtip',
        "columns":[
            {
                "title":"No"
            },{
                "title":"Status"
            },{
                "title":"Speed"
            },{
                "title":"Reference",
                "sortable": false
            }
        ],
        "bSort": true,
        "scrollY": 100,
        "scrollX": true,
        "lengthMenu": [
            [10, 25, 50, -1],
            ['10 rows', '25 rows', '50 rows', 'Show all']
        ],
        "buttons": [
            'excelHtml5'
        ]
    });
    for(var i = 0; i < 400; i  ){
        var speed = (1000 - (i * 2));
        example.row.add( ["abc", "def", speed, "sd"])
    }
    example.draw();
    $('#tabledata').on('click', 'tbody tr', function () {
        var rowData =  example.row(this).data();
        console.log(rowData);
        $("#myModal").modal("show");
        $("#txt_status").val(rowData[1]);
        $("#txt_speed").val(rowData[2]);
    });         
});
 

Хотя я предпочел бы использовать объекты:

 $(document).ready(function () {
    var example = $("#tabledata").DataTable({
        "dom": 'Blfrtip',
        "columns":[
            {
                "title":"No",
                "data": "no"
            },{
                "title":"Status",
                "data": "status"
            },{
                "title":"Speed",
                "data": "speed"
            },{
                "title":"Reference",
                "sortable": false,
                "data": "reference"
            }
        ],
        "bSort": true,
        "scrollY": 100,
        "scrollX": true,
        "lengthMenu": [
            [10, 25, 50, -1],
            ['10 rows', '25 rows', '50 rows', 'Show all']
        ],
        "buttons": [
            'excelHtml5'
        ]
    });
    for(var i = 0; i < 400; i  ){
        var speed = (1000 - (i * 2));
        example.row.add( {
            "no": "abc",
            "status": "def",
            "speed": speed,
            "reference": "sd"
        })
    }
    example.draw();
    $('#tabledata').on('click', 'tbody tr', function () {
        var rowData =  example.row(this).data();
        console.log(rowData);
        $("#myModal").modal("show");
        $("#txt_status").val(rowData.status);
        $("#txt_speed").val(rowData.speed);
    });         
});
 

У вас есть таблицы данных, так что вы можете сделать так, чтобы это работало на вас как можно лучше.

Итак, если вы хотите объединить данные внутри ячеек, вы можете использовать рендеринг, подобный этому:

 $(document).ready(function () {
    var example = $("#tabledata").DataTable({
        "dom": 'Blfrtip',
        "columns":[
            {
                "title":"No",
                "data": "no"
            },{
                "title":"Status",
                "data": "status",
                "visible": false
            },{
                "title":"Speed",
                "data": "speed",
                "render": function(data, type, row){
                    return row.status   data;
                }
            },{
                "title":"Reference",
                "sortable": false,
                "data": "reference"
            }
        ],
        "bSort": true,
        "scrollY": 100,
        "scrollX": true,
        "lengthMenu": [
            [10, 25, 50, -1],
            ['10 rows', '25 rows', '50 rows', 'Show all']
        ],
        "buttons": [
            'excelHtml5'
        ]
    });
    for(var i = 0; i < 400; i  ){
        var speed = (1000 - (i * 2));
        example.row.add( {
            "no": "abc",
            "status": "def",
            "speed": speed,
            "reference": "sd"
        })
    }
    example.draw();
    $('#tabledata').on('click', 'tbody tr', function () {
        var rowData =  example.row(this).data();
        $("#myModal").modal("show");
        $("#txt_status").val(rowData.status);
        $("#txt_speed").val(rowData.speed);
    });         
});
 

Таким образом, у вас все еще есть данные rowData для отображения в вашем модальном.

Надеюсь, это поможет. Здесь работает JSFiddle.

Если вы хотите получить доступ к данным, вы можете добавить прослушиватель событий к событию tr click. Вы были очень близки к цели, но вам нужно было запросить DataTable для получения данных.

 $('#services_schdulue tbody').on('click', 'tr', function (e) {
    console.log( myTable.row( this ).data() );
});
 

Работающий JSFiddle здесь с вашими данными.