Javascript 如何使用DataTables处理onclick事件？

我有一个脚本，它初始化数据表并每隔几秒钟重新加载内容

我想添加

onclick

事件处理程序，但不确定如何构造文件。现在的情况是，

openPoolModal

功能在页面刷新时被触发，而不发生任何单击。当模式对话框打开且不存在任何表时，这将导致初始化失败

当我在

DataTables

初始化之后移动

onclick

行时，

getElementById

只返回null

   var table;

$(document).ready(function() {

$('#main-table').on("click", "tr", openPoolModal(document.getElementById("hashrateId").innerText));

table = $('#main-table').DataTable({
            ajax: {
                url: '/refresh',
                dataSrc:''
            },
           paging: true,
           lengthChange: false,
           pageLength: 20,
           stateSave: true,
           info: true,
           searching: false,
           "columnDefs": [
                 {
                 "className": "text-center",
                 "targets": 0,
                 "data": "id",
                 },

                 {
                 "className": "text-center",
                 "targets": 1,
                 "data" : function(data){

                     var seconds = data.repDate.second < 10 ? seconds = "0" + data.repDate.second : seconds = data.repDate.second;
                     var minutes = data.repDate.minute < 10 ? minutes = "0" + data.repDate.minute : minutes = data.repDate.minute;
                     var months = data.repDate.monthValue < 10 ? months = "0" + data.repDate.monthValue : months = data.repDate.monthValue;
                     var days = data.repDate.dayOfMonth < 10 ? days = "0" + data.repDate.dayOfMonth : days = data.repDate.dayOfMonth;

                     return data.repDate.year + "-" + months + "-" + days + "   " + data.repDate.hour + ":" + minutes + ":" + seconds;
                    },
                 },

                 {
                 "className": "text-center",
                 "targets": 2,
                 "data": function(data){
                    return data.hashrate/1000.0;
                    },
                 }
           ],
           "aoColumns": [
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "desc", "asc" ] }
           ],
           "order": [[ 0, "asc" ]]
});
});

setInterval(function(){
table.ajax.reload(null, false);
}, 8000);

Html表格：

<table class="table table-hover" id="main-table">

                        <thead class="thead-inverse">
                        <tr >
                            <th class="col-md-2 text-center">Network Id</th>
                            <th class="col-md-2 text-center">Rep date</th>
                            <th class="col-md-2 text-center">Hashrate [KH/s]</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr id="tableRow" style="cursor: pointer;" th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                            <td class="text-center" id="hashrateId" th:text="${networkHashrate.id}"> Sample id</td>
                            <td class="text-center" id="repDate" th:text="${@findAndDisplayDataService.formatDate(networkHashrate.repDate)}">Sample rep-date</td>
                            <td class="text-center" id="hashrate" th:text="${@findAndDisplayDataService.formatHashrate(networkHashrate.hashrate)}">Sample hashrate</td>
                        </tr>
                        </tbody>
                    </table>

网络Id
代表日期
哈希速率[KH/s]
样本id
样本代表日期
样本哈希率

我现在将尝试通过

---

将此代码与您拥有的其他代码分开放置。

未捕获类型错误：无法读取null的属性“innerText”

。同样，返回的

getElement

是

Null

。

表。在（'click'，'tr'，function（）{var id=$（this）.find（'td#hashrateId'）.text（）；console.log（id）；openPoolModal（document.getElementById（“hashrateId”）.innerText）；}）不起作用。我想问题在于我的
ajax.reload
函数只是清除所有
html
标记、ID等。这就是
getElementBy
&
find
不起作用的原因。还有什么线索吗？@Maciaz很高兴能帮你：）：）还有一件事。我必须在
“#主表tbody tr”
中添加一个额外的标记，因为当试图通过单击
thead tr
对表进行排序时，
openPoolModal
也会触发。可能是一些常见的/相互冲突的问题，导致您看到该问题。
<table class="table table-hover" id="main-table">

                        <thead class="thead-inverse">
                        <tr >
                            <th class="col-md-2 text-center">Network Id</th>
                            <th class="col-md-2 text-center">Rep date</th>
                            <th class="col-md-2 text-center">Hashrate [KH/s]</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr id="tableRow" style="cursor: pointer;" th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                            <td class="text-center" id="hashrateId" th:text="${networkHashrate.id}"> Sample id</td>
                            <td class="text-center" id="repDate" th:text="${@findAndDisplayDataService.formatDate(networkHashrate.repDate)}">Sample rep-date</td>
                            <td class="text-center" id="hashrate" th:text="${@findAndDisplayDataService.formatHashrate(networkHashrate.hashrate)}">Sample hashrate</td>
                        </tr>
                        </tbody>
                    </table>

$(document).on('click', '#main-table tr', function () { 
  var hashrateId = $(this).find("td").eq(0).text(); 
  console.log(hashrateId); 
  //openPoolModal(hashrateId); 
});