在單元格單擊時獲取列 header

Question

我想在單元格單擊時獲取表格的 header 列。我已經嘗試如下。現在所有的值都在顯示。現在得到相關的值。

 $('td').click(function() { var txt = $(this).text(); var label=$(this).closest('tr').find('.label').text(); var header=$(this).closest('table').find('th').text(); console.log(txt + ':' +label + ':'+header); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead id="thead"> <th></th> <th>Week 1 </th> <th>Week 2 </th> <th>Week 3 </th> <th>Week 4 </th></thead> <tbody id="tbody"><tr><td class="label">test1</td><td>5</td><td>2</td><td>7</td><td>1</td></tr><tr><td class="label">test2</td><td>9</td><td>15</td><td>12</td><td>4</td></tr><tr><td class="label">test3</td><td>32</td><td>12</td><td>23</td><td>28</td></tr><tr><td class="label">test4</td><td>1</td><td>0</td><td>0</td><td>0</td></tr></tbody> <tbody id="tfooter"><tr><td>Total</td><td>145</td><td>120</td><td>157</td><td>162</td></tr></tbody> </table>

Answer 1

要完成這項工作，您需要獲取與行中單擊的td的索引匹配的th 。 為此，請使用index()和eq() ，如下所示：

 $('td').click(function() { let $cell = $(this); let txt = $cell.text(); let label = $cell.closest('tr').find('.label').text(); let header = $cell.closest('table').find('th').eq($cell.index()).text(); console.log(txt + ':' + label + ':' + header); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead id="thead"> <th></th> <th>Week 1 </th> <th>Week 2 </th> <th>Week 3 </th> <th>Week 4 </th> </thead> <tbody id="tbody"> <tr> <td class="label">test1</td> <td>5</td> <td>2</td> <td>7</td> <td>1</td> </tr> <tr> <td class="label">test2</td> <td>9</td> <td>15</td> <td>12</td> <td>4</td> </tr> <tr> <td class="label">test3</td> <td>32</td> <td>12</td> <td>23</td> <td>28</td> </tr> <tr> <td class="label">test4</td> <td>1</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> <tbody id="tfooter"> <tr> <td>Total</td> <td>145</td> <td>120</td> <td>157</td> <td>162</td> </tr> </tbody> </table>