jQuery的隐藏特定的表行的onclick点击事件

Question

我写了这样的事情来获得被点击jQuery中我的表内该行：

$("#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> 

所以在被点击的行我想隐藏的编辑按钮：

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

然后显示文本，使标题编辑：

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

我怎么能达到这个效果，有人可以帮我吗？

编辑：

家伙如此总结它什么，我居然想在这里实现的是：

- 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>