Question

我已经手动制作了json对象，并将其填充到我的datable中。此外，我还放置了两个用于编辑和删除功能的锚元素。目前，我只想检查控制台，单击编辑图标后，我的行数据是否在控制台中打印。它给出了不确定的。我知道我没有在html中提到行元素。不幸的是，我是一个初学者，不知道该怎么做。

<table class="table table-bordered" id="id_tbl_viewuser">
    <thead>
        <tr>
                        <th>SL No</th>
                        <th>First Name</th>
                        <th>Middle Name</th>
                        <th>Last Name </th>
                        <th>LogIn Id</th>
                        <th>Current Branch</i></th>
                        <th>Primary Phone No</th>
                        <th>Edit</th>
                        <th>Delete</th>


                    </tr>
                </thead>
                <tbody> 

                </tbody>


            </table>

<---脚本--->

$(document).ready( function () {
    var table = $('#id_tbl_viewuser').DataTable({
        "ordering": false,
        data: mydata,
        columns: [
        { data: 'sl_no' },
        { data: 'firstname' },
        { data: 'middlename' },
        { data: 'lastname' },
        { data: 'login_id' },
        { data: 'current_branch' },
        { data: 'primary_phoneno' },
        {
            data: null,
            className: "center",
            defaultContent: ' <a href="#"  id="icon_edit_user" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>'
        },

        {

            data: null,
            className: "center",
            defaultContent: ' <a href="#" class="delete" title="delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>'
        }

        ]

    });

     $('#id_tbl_viewuser tbody').on('click', '#icon_edit_user' , function(){
        var row_data = table.row( this ).data() ;
         console.log(row_data);

    });

} );


var mydata=[
{
    "sl_no" : "1",
    "firstname": "vikash",
    "middlename" : "kumar",
    "lastname" : "jha",
    "login_id" : "bk103767",
    "current_branch" : "BandhanKonnagar",
    "primary_phoneno" : "8961475876"

},

{
    "sl_no" : "2",
    "firstname": "vikash",
    "middlename" : "kumar",
    "lastname" : "jha",
    "login_id" : "bk103767",
    "current_branch" : "BandhanKonnagar",
    "primary_phoneno" : "8961475875"
},



{
    "sl_no" : "3",
    "firstname": "pramod",
    "middlename" : "kumar",
    "lastname" : "singh",
    "login_id" : "bk103767",
    "current_branch" : "BandhanKonnagar",
    "primary_phoneno" : "8961475875"
}




]

在控制台中，我不确定。

Answer 1

数据表row.data()仅在使用 row 元素作为选择器时有效。

您的问题是click事件正在监听列元素。

为解决此问题，我们可以使用jQuery通过closest函数来查找父对象。

更正的代码：

$('#id_tbl_viewuser tbody').on('click', '#icon_edit_user' , function(){
        var row_tr = $(this).closest('tr');
        var row_data = table.row( row_tr ).data() ;
         console.log(row_data);
});

在下面运行固定的代码段

$(document).ready(function () {
    table = $('#id_tbl_viewuser').DataTable({
        ordering: false,
        data: mydata,
        columns: [
            { data: 'sl_no'},
            { data: 'firstname'},
            { data: 'middlename'},
            { data: 'lastname' },
            { data: 'login_id' },
            { data: 'current_branch' },
            { data: 'primary_phoneno' },
            {
              data: null,
              className: "center",
              defaultContent: ' <a href="#"  id="icon_edit_user" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>'
            },
            {
             data: null,
             className: "center",
             defaultContent: ' <a href="#" class="delete" title="delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>'
            }
        ]
    });
    
    $('#id_tbl_viewuser tbody').on('click', '#icon_edit_user' , function(){
        var row_tr = $(this).closest('tr');
        var row_data = table.row( row_tr ).data() ;
         console.log(row_data);

    });
});

var mydata=[
{
    "sl_no" : "1",
    "firstname": "vikash",
    "middlename" : "kumar",
    "lastname" : "jha",
    "login_id" : "bk103767",
    "current_branch" : "BandhanKonnagar",
    "primary_phoneno" : "8961475876"

},
{
    "sl_no" : "2",
    "firstname": "vikash",
    "middlename" : "kumar",
    "lastname" : "jha",
    "login_id" : "bk103767",
    "current_branch" : "BandhanKonnagar",
    "primary_phoneno" : "8961475875"
},
{
    "sl_no" : "3",
    "firstname": "pramod",
    "middlename" : "kumar",
    "lastname" : "singh",
    "login_id" : "bk103767",
    "current_branch" : "BandhanKonnagar",
    "primary_phoneno" : "8961475875"
}
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table class="table table-bordered" id="id_tbl_viewuser">
    <thead>
        <tr>
            <th>SL No</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>LogIn Id</th>
            <th>Current Branch</th>
            <th>Primary Phone No</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>SL No</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>LogIn Id</th>
            <th>Current Branch</th>
            <th>Primary Phone No</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </tfoot>
</table>

我想在单击图标时打印行数据

1 个答案: