gpt4 book ai didi

javascript - 如何在右键单击表格行时显示编辑按钮

转载 作者:可可西里 更新时间:2023-11-01 13:09:31 25 4
gpt4 key购买 nike

是否可以在右键单击表格的行后显示编辑按钮?我想在我的 html 页面中内置此功能,但我不知道如何做到这一点。我的html页面是这样的

<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>johnrambo@mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>

<a class="btn btn-mini btnEdit">Edit</a>
</td>

</tr>
<tr>
<td>peterparker@mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>

<a class="btn btn-mini btnEdit">Edit</a>

</td>

</tr>
</tbody>
</table>

当我右键单击此表格的行时,它应该会显示编辑按钮,我可以使用它来编辑表格。要编辑表格,我有 js 文件,但那是另一回事。主要是我想让编辑按钮在右键单击后可见。而且我还使用 Bootstrap 来提高可见性。请帮我解决这个问题。 enter image description here

最佳答案

此代码可能对您有帮助:

右键单击特定的<tr>

1) 没有打开默认的浏览器菜单

2) 显示/隐藏编辑链接

点击文档(左右)

1) 隐藏编辑链接(可相应更改)

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.btnEdit{display:none;}
</style>
</head>
<body>
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr class ='abc' >
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id = 'John1' class ='abc'> <!-- id=username+userid -->
<td>johnrambo@mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit" href='asd.html' >Edit</a>
</td>

</tr>
<tr id = 'Peter1' class ='abc'>
<td>peterparker@mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit" id ="btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>

<script>
$(document).ready(function(){
$('.abc').contextmenu(function(){
$('.btnEdit').hide();
var id = $(this).attr('id');
$('#'+id+' .btnEdit').toggle();
return false;
});
$(document).click(function(){
$('.btnEdit').hide();
});
});
</script>

在这里试试 http://jsfiddle.net/f5n9f4po/2/

关于javascript - 如何在右键单击表格行时显示编辑按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26966716/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com