HTMLテーブルの特定の列から、その行のチェックボックスがJavascript/JQueryを使用してチェックされているときにデータを取得する

Question

5つの列を持つHTMLテーブルがあります。最初の列はチェックボックスです。その行のチェックボックスがオンになっているとき、第5列（最後の列）の内容を探したいと思います。

HTML：

<table> 
    <tr> 
     <th></th> 
     <th>A</tr> 
     <th>B</tr> 
     <th>C</tr> 
     <th>D</tr> 
    </tr> 
    <tr> 
     <td><input type='checkbox' class="chk" /></td> 
     <td>data for A1</td> 
     <td>data for B1</td> 
     <td>data for C1</td> 
     <td>data for D1</td> 
    </tr> 
    <tr> 
     <td><input type='checkbox' class="chk"/></td> 
     <td>data for A2</td> 
     <td>data for B2</td> 
     <td>data for C2</td> 
     <td>data for D2</td> 
    </tr> 
    </table> 

私はJavaScriptで初心者ですが、これをやって試してみました。

** JS：**

$(document).ready(function(){ 
     if($('input.chk').is(':checked')){ 
     var y = $("td:nth-of-type(5)").html(); 
     alert(y); 
     } 
     }); 

この機能は、チェックボックスがチェックされたとき、それは「D1用のデータ」を示す最初の行即ちため返します。しかし、私はすべての行のためにそれをしたい。

ありがとうございました。 :)

Answer 1

この1

$(document).on('click','input.chk',function(){ 
    // getting the tds with in the rows in which check exists 
    $tds=$(this).parent().siblings(); 

    if($(this).is(':checked')) 
    { 
     $data=$($tds[$tds.length-1]).text(); 
     alert($data); 
    } 

    }) 

Answer 2

一度これを試してください：あなたは、このコードを実行したい場合は

​​

あなたは、チェックボックスがチェックされている場合にのみ:checked条件を追加することができます。

Answer 3

異なるアプローチがeqを使用することに基づいている：

$(function() { 
 
    $(':checkbox').on('click', function(e) { 
 
    if (this.checked == true) { 
 
     var fifthEle = $(this).parent().siblings().eq(3); 
 
     $('#logMsg').append('<p>' + fifthEle.text() + '</p>'); 
 
    } 
 
    }) 
 
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
     <th></th> 
 
     <th>A 
 
     <th>B 
 
     <th>C 
 
     <th>D 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' class="chk"/></td> 
 
     <td>data for A1</td> 
 
     <td>data for B1</td> 
 
     <td>data for C1</td> 
 
     <td>data for D1</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' class="chk"/></td> 
 
     <td>data for A2</td> 
 
     <td>data for B2</td> 
 
     <td>data for C2</td> 
 
     <td>data for D2</td> 
 
    </tr> 
 
</table> 
 
<div id="logMsg"></div>