jQuery僅隱藏特定的表行單擊的onclick事件

Question

我寫了這樣的東西來獲取在表中的jQuery中單擊的行：

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

這是可行的，但不是我想象的那樣。問題是我的表中有多個動作按鈕，我需要僅針對特定類型的按鈕而不是所有tr來觸發此事件。

因此，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>