###前提・実現したいこと
htmlのtableのtdのクラスの数を数える方法、tableのtrのindexを取得する方法を知りたいです。

###発生している問題・エラーメッセージ

javascript
1index=-1
2と表示されてしまいます。

###該当のソースコード

html
1<table>
2<tr>
3<th>名前</th>
4<th>身長</th>
5<th>体重</th>
6<th></th>
7</tr>
8<tr>
9<td>佐藤</td>
10<td class="height">170</td>
11<td class="weight danger">50</td>
12</tr>
13<tr>
14<td>鈴木</td>
15<td class="danger">150</td>
16<td class="weight">50</td>
17</tr>
18<tr>
19<td>田中</td>
20<td class="height">180</td>
21<td class="weight">70</td>
22</tr>
23<tr>
24<td>山田</td>
25<td class="height">170</td>
26<td class="weight danger">80</td>
27</tr>
28</table>

javascript
1for(var i=0;i<6;i++){
2if($('tr').eq(i).find('td').hasClass('danger')){
3$('tr').eq(i).append('<td>'+'<button class="btn btn-sm">'+'表示'+'</button>'+'</td>');
4//dangerクラスを持っている場合、空欄のthにボタンを配置します。
5//このボタンをクリックすると、.dangerを持っているクラス名を表示させたいです
6}
7}

###試したこと

javascript
1$('.btn').on('click',function(){
2var index=$('.btn').index($(this));
3if($('.btn').eq(index).parents('td height').hasClass('danger')){
4alert('height');
5}else if($('.btn').eq(index).parents('td weight').hasClass('danger')){
6alert('weight');
7}
8});
9//おそらくparentsの使い方が間違っていると思います、、、parentsの位置、有無、tdをtrにしたりとこの式をベースに色々いじりましたが、うまく行きませんでした

###補足情報(言語/FW/ツール等のバージョンなど)
また、 .danger を持っている td .height、td .weightの数の数え方も合わせて教えていただけるとありがたいです。
jQueryは使えます。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

var index=$('.btn').index($(this));

var index=$('.btn').index(this);

調整

javascript
1$(function(){
2  $('#t1 tbody tr')
3    .has('td.danger').append($('<td>').append($('<button>').addClass("btn btn-sm").text('表示'))).end()
4    .not(':has(td.danger)').append($('<td>').text('no danger'));
5  $('#t1').on('click','.btn',function(){
6    var n=$(this).closest('tr').find('td.danger');
7    if(n.hasClass('height')){ console.log('height');}
8    if(n.hasClass('weight')){ console.log('weight');}
9  });
10});
11
12

HTML
1<table id="t1">
2<thead>
3<tr>
4<th>名前</th>
5<th>身長</th>
6<th>体重</th>
7<th></th>
8</tr>
9</thead>
10<tbody>
11<tr>
12<td>佐藤</td>
13<td class="height">170</td>
14<td class="weight danger">50</td>
15</tr>
16<tr>
17<td>鈴木</td>
18<td class="danger height">150</td>
19<td class="weight">50</td>
20</tr>
21<tr>
22<td>田中</td>
23<td class="height">180</td>
24<td class="weight">70</td>
25</tr>
26<tr>
27<td>山田</td>
28<td class="height">170</td>
29<td class="weight danger">80</td>
30</tr>
31</tbody>
32</table>