如何顯示懸停在表格行上時出現的引導程序編輯和刪除按鈕

Question

我有一個 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/

我怎樣才能正確地開發這個

Answer 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/

Answer 2

我不知道我是否正確理解你想要什么，但看看這個小提琴。

您可以在文檔就緒時或通過 css 隱藏鉛筆鏈接，然后在顯示pencil類鏈接的類nesting火hover事件的 div 上隱藏。 在mouseleave事件中隱藏pencil類鏈接。

然后在nesting類 div 內的pencil類上插入單擊事件。

PS：我在你的代碼中沒有找到任何刪除按鈕，但它與點擊pencil類時插入的原理相同。

如果只想顯示行懸停對應的鉛筆圖標，可以在 div nesting類中的每個鏈接上使用每個函數

 $(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>

Answer 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>

如何顯示懸停在表格行上時出現的引導程序編輯和刪除按鈕

問題描述

3 個解決方案

解決方案1
2 2017-09-27 10:17:04

解決方案2
0 2017-09-27 09:51:44

解決方案3
0 2017-09-27 10:34:43

如何顯示懸停在表格行上時出現的引導程序編輯和刪除按鈕

問題描述

3 個解決方案

解決方案1 2 2017-09-27 10:17:04

解決方案2 0 2017-09-27 09:51:44

解決方案3 0 2017-09-27 10:34:43

解決方案1
2 2017-09-27 10:17:04

解決方案2
0 2017-09-27 09:51:44

解決方案3
0 2017-09-27 10:34:43