[英]jQuery hide only specific table row clicked onclick event
I have written something like this to get the row that was clicked in jquery inside my table: 我写了这样的东西来获取在表中的jQuery中单击的行:
$("#datatable-responsive").delegate("tr", "click", function (e) {
console.log($(e.currentTarget).index() + 1);
});
This works, but not the way I imagined it... The problem is that I have more than 1 action button inside my table and I need this event to be only triggered for specific type of button, not all tr's.... 这是可行的,但不是我想象的那样。问题是我的表中有多个动作按钮,我需要仅针对特定类型的按钮而不是所有tr来触发此事件。
So the HTML markup looks like this: 因此,HTML标记如下所示:
<tr>
<input type="text" class="titleInput" value="" />
<i class="fa fa-edit editTitle">
</tr>
So upon the row being clicked I'd like to hide the edit button: 因此,在单击该行之后,我想隐藏编辑按钮:
$(".editTitle").hide();
And then show the textbox to make the title editable: 然后显示文本框以使标题可编辑:
$(".titleInput").show();
How could I achieve this effect, can someone help me out? 我怎样才能达到这种效果,有人可以帮助我吗?
Edit: 编辑:
Guys so to summarize it what I'm actually trying to achieve here is: 伙计们,总结一下,我实际上在这里想要实现的是:
- 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 ...
Using below code, you can achieve the effect, you are expecting. 使用下面的代码,您可以达到预期的效果。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.