Question

我尝试通过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]);
            });
        });

Answer 1

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

您已拥有DataTables，因此您可以尽可能让它为您服务。

因此，如果您想在单元格中连接数据，可以使用这样的渲染：

$(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 here。

Answer 2

如果要访问数据，可以向tr click事件添加事件侦听器。你几乎就在那里，但你需要查询DataTable的数据。

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

使用您的数据工作JSFiddle here。

表格中的文本框中的数据

2 个答案: