数据表在一行中单击

Question

我有一个基本的 SpringBoot 应用程序，使用 Spring Initializer、嵌入式 Tomcat、Thymeleaf 模板引擎，并将包为可执行的 JAR 文件我有一个像这样定义的数据表，但随后我单击一行没有任何反应我正在使用的数据表版本是1.10.15

$(document).ready(function() {
    $('#deviceEventTable').dataTable( {
        "order": [[ 0, "desc" ]],
        "bLengthChange": false,
        "pageLength": 20,
    }); 
    $('#deviceEventTable tbody').on('click', 'input', function () {
        alert ('clicking....');
        $(this).closest("tr").toggleClass('selected');
    }); 
} );

在这里生成的表

 <!-- TABLE -->
                              <table id="deviceEventTable" class="pure-table" style="position: relative;">
                                <thead>
                                    <tr>
                                        <th class="col_id">ID</th>
                                        <th class="col_id"><!-- ID -->
                                            DEVICE ID
                                        </th>
                                        <th class="col_id"><!-- ID -->
                                            EMPRESA
                                        </th>
                                        <th class="col_name"><!-- NAME -->
                                            DESCRIPTION
                                        </th>
                                        <th class="col_battery"><!-- BATTERY -->
                                            BATERIA
                                        </th>
                                        <th class="col_last_event"><!-- LAST EVENT -->
                                            ULTIMO MENSAJE RECIBIDO
                                        </th>
                                        <th class="col_signal"><!-- SIGNAL -->
                                            SIGNAL
                                        </th>
                                         <th class="col_signal"><!-- SIGNAL -->
                                            DATA
                                        </th>
                                        <th class="col_state"><!-- STATE -->
                                            ALARMA
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="col_id">1</td><!-- ID -->
                                        <td class="col_id">Devuser2</td>
                                        <td class="col_id">user2 FirstName user2 LastName company</td>
                                        <td class="col_name">Test device</td>
                                        <td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>
                                        <!-- <td class="col_temp">0ºC / 0ºF </td> --><!-- TEMP. -->
                                        <td class="col_last_event">2017-06-20T16:23:26.236</td><!-- LAST EVENT -->
                                        <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL -->
                                        <td class="col_last_event">1</td><!-- LAST EVENT -->
                                        <td class="col_state">                                                                                    

                                        </td><!-- STATE -->
                                    </tr>
                                    <tr>
                                        <td class="col_id">2</td><!-- ID -->
                                        <td class="col_id">Devuser2</td>
                                        <td class="col_id">user2 FirstName user2 LastName company</td>
                                        <td class="col_name">Test device</td>
                                        <td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>
                                        <!-- <td class="col_temp">0ºC / 0ºF </td> --><!-- TEMP. -->
                                        <td class="col_last_event">2017-06-20T16:23:28.370</td><!-- LAST EVENT -->
                                        <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL -->
                                        <td class="col_last_event">2</td><!-- LAST EVENT -->
                                        <td class="col_state">                                                                                    
                                        </td><!-- STATE -->
                                    </tr>
                                    <tr>
                                        <td class="col_id">3</td><!-- ID -->
                                        <td class="col_id">Devuser2</td>
                                        <td class="col_id">user2 FirstName user2 LastName company</td>
                                        <td class="col_name">Test device</td>
                                        <td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>
                                        <!-- <td class="col_temp">0ºC / 0ºF </td> --><!-- TEMP. -->
                                        <td class="col_last_event">2017-06-20T16:23:30.737</td><!-- LAST EVENT -->
                                        <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL -->
                                        <td class="col_last_event">3</td><!-- LAST EVENT -->
                                        <td class="col_state">                                                                                    
                                        </td><!-- STATE -->
                                    </tr>
                                    <tr>
                                        <td class="col_id">4</td><!-- ID -->
                                        <td class="col_id">Devuser2</td>
                                        <td class="col_id">user2 FirstName user2 LastName company</td>
                                        <td class="col_name">Test device</td>
                                        <td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>
                                        <!-- <td class="col_temp">0ºC / 0ºF </td> --><!-- TEMP. -->
                                        <td class="col_last_event">2017-06-20T16:23:32.625</td><!-- LAST EVENT -->
                                        <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL -->
                                        <td class="col_last_event">4</td><!-- LAST EVENT -->
                                        <td class="col_state">                                                                                    
                                        </td><!-- STATE -->
                                    </tr>
                                    <tr>
                                        <td class="col_id">5</td><!-- ID -->
                                        <td class="col_id">Devuser2</td>
                                        <td class="col_id">user2 FirstName user2 LastName company</td>
                                        <td class="col_name">Test device</td>
                                        <td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max99"><div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>
                                        <!-- <td class="col_temp">0ºC / 0ºF </td> --><!-- TEMP. -->
                                        <td class="col_last_event">2017-06-20T16:23:34.649</td><!-- LAST EVENT -->
                                        <td class="col_signal">-127.0 dBm.</td><!-- SIGNAL -->
                                        <td class="col_last_event">5</td><!-- LAST EVENT -->
                                        <td class="col_state">                                                                                    

                                        </td><!-- STATE -->
                                    </tr>
                                </tbody>
                            </table>

Answer 1

您不是以行为目标;而是以表中的任何输入元素为目标。

$('#deviceEventTable tbody').on('click', 'input', function () { // 'input' selects inputs, not the row

在配置对象中使用 createdRow：

'createdRow' : function (row, data, index) {
                    $('td', row).click( function () {
                        // do something
                        });
                    }
                },