jQueryのが唯一の特定のテーブルの行を非表示には、私は私のテーブル内のjQueryでクリックされた行を取得するには、このような何かを書かれているのonclickイベントに

Question

をクリック：

$("#datatable-responsive").delegate("tr", "click", function (e) { 
     console.log($(e.currentTarget).index() + 1); 
    }); 

これは私がそれを想像ように動作しますが、ありません...問題は、私のテーブルの中に1つ以上のアクションボタンがあり、特定のタイプのボタンでのみトリガーされるようにこのイベントを必要とすることです...

したがって、HTMLマークアップは次のようになります。

<tr> 
<input type="text" class="titleInput" value="" /> 
<i class="fa fa-edit editTitle"> 
</tr> 

、

$(".titleInput").show(); 

がどのように私はこの効果を達成できます。編集可能なタイトルを作るために

$(".editTitle").hide(); 

そしてテキストボックスを表示：行がクリックされると

は、だから私は、編集ボタンを非表示にします誰かが私を助けることができますか？

編集：

みんなそうです私は実際にここに達成しようとしていることを要約する：コードの下に使用

- Upon click on the ".editTitle", Id' like to hide this element and then show the textbox which is shown above the <i> tag itself, but only for the clicked row ... 

Answer 1

は、あなたが期待している、効果を実現することができます。

$(document).ready(function() { 
     /* BELOW EVENT WILL BE TRIGGERED WHEN USER CLICK ON ANY ROW INSIDE TBODY TAG - STARTS */ 
     $("table tbody tr").click(function(){ 
     /* HIDING OTHER EDIT TEXT BOX AND SHOWING OTHER EDIT TITLE - STARTS */ 
     $(".editTitle").show(); 
     $(".titleInput").hide(); 
     /* HIDING OTHER EDIT TEXT BOX AND SHOWING OTHER EDIT TITLE - ENDS */ 
     /* SHOWING CURRENT CLICKED ROW - EDIT TEXT BOX - STARTS */ 
     $(this).find(".titleInput").show(); 
     /* SHOWING CURRENT CLICKED ROW - EDIT TEXT BOX - STARTS */ 
     /* HIDING CURRENT CLICKED ROW - EDIT TITLE - STARTS */ 
     $(this).find(".editTitle").hide(); 
     /* HIDING CURRENT CLICKED ROW - EDIT TITLE - STARTS */ 
     }); 
     /* BELOW EVENT WILL BE TRIGGERED WHEN USER CLICK ON ANY ROW INSIDE TBODY TAG - ENDS */ 
    }); 


<table width="100%" cellpadding="10" cellspacing="10"> 
    <thead> 
     <tr> 
     <th width="200">Name</th> 
     <th>Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>John</td> 
     <td> 
      <input type="text" class="titleInput" value="" /> 
      <span class="editTitle">Edit</span> 
     </td> 
     </tr> 
     <tr> 
     <td>MIc</td> 
     <td> 
      <input type="text" class="titleInput" value="" /> 
      <span class="editTitle">Edit</span> 
     </td> 
     </tr> 
     <tr> 
     <td>Kevin</td> 
     <td> 
      <input type="text" class="titleInput" value="" /> 
      <span class="editTitle">Edit</span> 
     </td> 
     </tr> 
    </tbody> 
</table> 


<style> 
.titleInput{display:none} 
</style>