如何在悬停在表格行上时显示引导编辑和删除按钮答案

【问题标题】：how to show bootstrap edit and delete button appearing on hover over the table row如何在悬停在表格行上时显示引导编辑和删除按钮
【发布时间】：2017-11-27 04:33:49
【问题描述】：

我有一个 twitter 引导表，每行的最后一个单元格中有一个按钮组。我希望这些按钮仅在用户将鼠标悬停在该行上时出现。并且需要分别点击编辑和删除图标。

我有以下脚本 html

<div class="nesting">

  <a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
  <div class="nestchild">
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
    </div>    
      </div>

css

.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }

javascripts

$(document).ready(function(){
    $('.nesting a').hover(function(){  
        $(this).children('span.pencil').css({'display' : 'inline-block'});
    },function(){  
        $(this).children('span.pencil').css({'display' : 'none'});
    });
});

看这个演示

https://jsfiddle.net/lilan2/a82jzucc/

我怎样才能正确地开发它

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

相反，您可以使用 jquery 在鼠标悬停显示编辑删除按钮时更新表格行中的编辑和删除按钮

$(document).ready(function() {
  // show buttons on tr mouseover
  $(".hover tr").live("mouseenter", function() {
    $(this).find("td:last-child").html('<a href="javascript:void(0);" onClick="editrow(' + $(this).attr("id") + ')">Edit</a>&nbsp;&nbsp;<a href="javascript:void(0);" onClick="deleterow(' + $(this).attr("id") + ')">Delete</a>');
  }); //

  // remove button on tr mouseleave
  $(".hover tr").live("mouseleave", function() {
    $(this).find("td:last-child").html("&nbsp;");
  });

  // TD click event
  $(".hover tr").live("click", function(event) {
    if (event.target.nodeName == "TD") {
      alert("You can track TD click event too....Isnt it amazing !!!");
    }
  });
});
editrow = function(itemId) {
  alert("You clicked 'Edit' link with row id :" + itemId);
}
deleterow = function(itemId) {
  alert("You clicked 'Delete' link with row id :" + itemId);
}

table {
  font-family: verdana;
  font-size: 12px;
}

table th {
  text-align: left;
  background: #D3D3D3;
  padding: 2px;
}

table tr:hover {
  background: #EFEFEF;
}

table tr {
  text-align: left;
}

table td {
  padding: 5px;
}

table td a {
  color: #0454B5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<body>
  <table width="40%" border="0" class="hover">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th width="20%">Action</th>
      </th>
      <tr id="100">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="101">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="102">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="103">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="104">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="105">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
  </table>
</body>

参考更新的小提琴https://jsfiddle.net/VaibhavD/6aehaxr6/2/embedded/result/

【讨论】：

如何添加另一个名称作为添加到此编辑和删除链接
不要将所有答案包装到代码块中，而是将 jsfiddle 的代码添加到答案中
悬停时调整表格 tr 的大小。我不想要这个！

【解决方案2】：

我不知道我是否正确理解了你想要什么，但是看看这个小提琴。

您可以在准备好的文档或通过 css 隐藏铅笔链接，然后在显示 pencil 类链接的类 nesting 触发 hover 事件的 div 上。在mouseleave 事件中隐藏pencil类链接。

然后在nesting类div中的pencil类上插入点击事件。

PS：我在您的代码中没有找到任何删除按钮，但它与单击pencil 类时插入的原理相同。

如果只想显示对应行悬停的铅笔图标，可以在 div nesting 类中的每个链接上使用each 函数

$(document).ready(function(){
	
$('.nesting a .pencil').hide();

$('div.nesting a').each(function(){

		$(this).hover(function(){  
    	$(this).find('.pencil').show();
	}).mouseleave(function(){
  	$(this).find('.pencil').hide();
  });
})
  
 $('div.nesting .pencil').click(function(){
 		alert("You have clicked on pencil");
 }) 
 });

.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nestchild { margin-left : 15px; }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nesting">
    
  <a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
  <div class="nestchild">
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
    </div>    
      </div>

【讨论】：

好的，我需要在鼠标悬停在原始表格中加载一个铅笔图标，例如，当我访问 Foo raw 时，我只需要查看铅笔图标。
哪一个铅笔图标？ Foo、Bar 还是这是一个链接？
我的意思是当我将鼠标悬停在每个 foo 栏上或者这是链接时我需要一次只显示一个笔形图标。当我将鼠标悬停在 foo 上时，我需要在 foo raw 上显示图标，然后如果我将鼠标悬停在此为原始链接，则我需要在此为原始链接的铅笔图标。
编辑答案，现在铅笔只会显示对应的行

【解决方案3】：

您的情况不需要 jQuery 脚本。只需使用 css 即可。

只需在 css 中添加 :hover 样式

function editItem() {
      alert("Edit icon clicked");
  }

.foo-class {
    float: left;
    padding: 3px;
    width: 300px;
    min-width: 300px;
}

.nesting span.pencil {
    float: right;
}

.nestchild a {
    clear: both;
    display: block;
}

.nesting {
    background-color: #ccc;
    width: 300px;
}

.nesting a {
    width: 285px;
}

a.nesting-item .pencil {
    display: none;
}

a.nesting-item:hover .pencil {
    display: block;
}

.nestchild {
    margin-left: 15px;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nesting">

    <a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
    <div class="nestchild">
        <a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil" onclick="editItem()"></span></a>
        <a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil" onclick="editItem()"></span></a>
    </div>
</div>

【讨论】：

@John 添加可以运行的引导 js 和 css 文件。我已经更新了代码。