Question

我写了这样的东西来获取在我的表中的jquery中单击的行：

 $("#datatable-responsive").delegate("tr", "click", function (e) {
        console.log($(e.currentTarget).index() + 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>

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

1 个答案: