jquery - ユーザーがクリックした列/行の特定

Question

JQuery を使用して、ユーザーがリンクまたは 3 番目の列をクリックしたかどうかを知る必要があり、最初の列の変数の値を取得する必要があります。どうすればいいですか？

私のHTML：

<div id="test">
<table id="tablex" cellpadding="0" cellspacing="0" border="0" class="display">
    <thead>
        <tr>
            <th>Cod</th>
            <th>Name completo</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
         <tr>
             <td>1</td>
             <td>John Foster 1</td>
             <td><img entity_id="1" class="image-selector" src='imagens/grid_cancel.png' title=''  /></td>
         </tr>
    </tbody>
</table>

私のjQuery：

$("#tablex tbody").on("click", "td", function(event){
   alert($(this).text());
});

Answer 1

$("#tablex tbody").on("click", "td", function(event){
    alert($(this).index());
    alert($(this).siblings("td:first").text());
});

$(this).index()クリックされた列のゼロベースのインデックスが表示されます。 $(this).siblings("td:first").text()最初の列にテキストが表示されます。

ここで、フィドルを持っています: http://jsfiddle.net/adrianonantua/EAEsG/

Answer 2

これにより、クリックされた列の列番号と、最初の列の値が得られます...

$("#tablex tbody").on("click", "td", function(event){
   var index = $(this).index();
   var col1value = $(this).parent().find("td").first().text();
});

Answer 3

 <script type="text/javascript">
  $(document).ready(function() {     
   $(".image-selector").on("click", function(event){
    var colvalue = $(this).parent().parent().find("td").first().text();
    alert(colvalue);
});  
 }); 
 </script>  

画像クリックではなく TD クリックに基づくようにする場合は、クラスを画像ではなく td に移動します。

ただし、HTML5データ属性を使用して、よりクリーンな代替案を検討しています

HTML

  <td>1</td>
  <td>John Foster 1</td>
  <td><div data-value='1' class='image-selector'><img src='imagens/grid_cancel.png' title=''  /></div></td>

jQuery

 <script type="text/javascript">
  $(document).ready(function() {     
   $(".image-selector").on("click", function(event){
    var colvalue = $(this).data('value');
    alert(colvalue);
  });    
 }); 
 </script>