jqueryを使用して最初のtdをクリックしてhtmlテーブルの第2 tdの値を取得する方法

Question

私はhtmlテーブルの第1列のクリックで第2 tdの値を取得する必要があります。私はこれを達成するためにjqueryを使用しています。

$('.tbody').on('click','tr td:nth-child(1)', function() { 
       var id = $(this).closest("td").find('td:eq(1)').text(); 
       alert(id) 

      }); 

私は私が空のアラートを取得しています上記code.Butに示すように、第2のTDの値を取得するにはonclickの機能を使用しています。私はどこに間違って行って助けてください知っていない。 私の理解によると$（this）.closest（ "td"）find（ 'td：eq（1）'）text（）は次のtdを探し、.text（）メソッドはtdはありませんか？

以下のスニペットは、上記の問題を反映します。

助けてください！

ありがとうございます！

$(function() { 
 
    \t  $('.tbody').on('click','tr td:nth-child(1)', function() { 
 
    \t   var id = $(this).closest("td").find('td:eq(1)').text(); 
 
       alert(id) 
 
    \t  
 
    \t  }); 
 
    \t  
 
    \t });

#items { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    
 
    } 
 
#items th { 
 
    background-color: #009999; 
 
    color: white; 
 
    border : 1px solid; 
 
    
 
} 
 
#items td{ 
 
border : 1px solid; 
 
} 
 
    #items tbody{ 
 
    height:200px; 
 
    overflow-y:auto; 
 
} 
 
#items thead,.tbody{ 
 
    
 
    display:block; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container">  
 
\t \t <table class="table table-striped table-bordered table-hover table-condensed" style="width: 300px; " id="items"> 
 
\t \t <thead> 
 
\t \t <tr> 
 
\t \t  <th style="width:100px;">Fee Type</th> 
 
\t \t  <th style="width:100px;">Charges per Qty</th> 
 
\t \t  <th style="width:100px;">Qty</th> 
 
\t \t  
 
\t \t  
 
\t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody class="tbody"> 
 
\t \t <tr> 
 
    <td style="width:100px;">a</td> 
 
     <td style="width:100px;">b</td> 
 
     <td style="width:100px;">c</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width:100px;">d</td> 
 
     <td style="width:100px;">e</td> 
 
     <td style="width:100px;">f</td> 
 
    </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
\t \t </div>

Answer 1

あなたのロジックの問題がthisが既にtdを参照していることなので、closest('td')はあなたが必要とする要素を取得するつもりはありません。どちらもターゲットにしたいのはtdの親ではないので、find()は機能しません。あなたは代わりにclosest('tr')を使用する必要があります。しかし

var id = $(this).closest("tr").find('td:eq(1)').text() 

、これを達成するための最も簡単な方法はtd要素が兄弟であるとしてだけnext()を使用することです：

$(function() { 
 
    $('.tbody').on('click', 'tr td:nth-child(1)', function() { 
 
    var id = $(this).next().text(); 
 
    console.log(id); 
 
    }); 
 
});

#items { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
#items th { 
 
    background-color: #009999; 
 
    color: white; 
 
    border: 1px solid; 
 
} 
 

 
#items td { 
 
    border: 1px solid; 
 
} 
 

 
#items tbody { 
 
    height: 200px; 
 
    overflow-y: auto; 
 
} 
 

 
#items thead, 
 
.tbody { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <table class="table table-striped table-bordered table-hover table-condensed" style="width: 300px; " id="items"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width:100px;">Fee Type</th> 
 
     <th style="width:100px;">Charges per Qty</th> 
 
     <th style="width:100px;">Qty</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="tbody"> 
 
     <tr> 
 
     <td style="width:100px;">a</td> 
 
     <td style="width:100px;">b</td> 
 
     <td style="width:100px;">c</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="width:100px;">d</td> 
 
     <td style="width:100px;">e</td> 
 
     <td style="width:100px;">f</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>