jQuery为具有行索引的行添加标题答案

【问题标题】：jQuery add a title to the row with row indexjQuery为具有行索引的行添加标题
【发布时间】：2021-12-23 04:37:54
【问题描述】：

在我的数据表中，我希望 jQuery 为表中的每个表行添加一个标题，所以当我将鼠标悬停在每一行上时，我会看到该行的索引。我可以使用下面的代码捕获每个行索引，但无法将带有索引的属性“标题”作为值添加到每行

var table = $(".table").DataTable();
...

table.rows().every(function (rowIdx) {
        console.log(rowIdx);
        $(this).attr('title', rowIdx);//does not add a title at all
        $(this).prop('title', rowIdx);//does not add a title at all
});

有什么想法吗？

感谢阅读

【问题讨论】：

console.log $(this) 输出什么？
它实际上在调试控制台中显示了行的索引号......这就是我能够捕获行的索引的意思
调试 this 是什么 - 它不会是 tr

标签： jquery datatables

【解决方案1】：

您可以使用以下内容：

$(document).ready(function() {

  var table = $('#example').DataTable();
  
  table.rows().every(function (rowIdx) {
    $(this.node()).attr('title', rowIdx);
  });

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior "Technical" Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>

</div>



</body>
</html>

在您的问题中，当您使用 this 时，它指的是 DataTable 行（即 JavaScript 对象）。这是因为table.rows() 是一个返回DataTables 对象的DataTables API 函数。

要访问每个 DataTables 行对象中包含的 HTML <tr> 节点，您需要使用 DataTables node() 函数。

【讨论】：

美女！节点（）！我一直在疯狂地寻找正确的语法。感谢您提供额外的信息，非常感谢