テーブル行にカーソルを置いて表示されるブートストラップの編集と削除ボタンを表示する方法

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; } 

JavaScriptの

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

が

このデモを見たスクリプトを以下しています

は、どのように私はきちんと

Answer 1

私は私はあなたが欲しいものを正しく理解していれば知っているが、このバイオリンをチェックアウトしていない、これを開発することができます。

文書の鉛筆のリンクを非表示にするか、cssをクリックしてnesting火災hoverのクラスpencilのクラスリンクを表示するdivのdivを非表示にすることができます。 On mouseleaveイベント pencilクラスリンクを非表示にします。

pencilクラスのクリックイベントをnesting class divに挿入します。

PS：あなたのコードには削除ボタンが見つかりませんでしたが、それはpencilクラスをクリックして挿入するのと同じ原理です。

あなたがホバー行に対応する唯一の鉛筆アイコンを表示したい場合、あなたはdivのnestingクラス内のすべてのリンクにeach機能を使用することができます

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

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

 
\t \t $(this).hover(function(){ 
 
    \t $(this).find('.pencil').show(); 
 
\t }).mouseleave(function(){ 
 
    \t $(this).find('.pencil').hide(); 
 
    }); 
 
}) 
 
    
 
$('div.nesting .pencil').click(function(){ 
 
    \t \t 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 2

代わりに、更新するためにjqueryのを使用することができますマウスの上にあるテーブル行のボタンを編集および削除するedit edit delete buttons

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

を参照してくださいあなたのケースのためのjQueryのスクリプトの必要はありません。あなたは単にCSSでそれを行うことができます。

ちょうど私が私がfooを訪れたとき、私は唯一の鉛筆アイコンを表示必要な例 として、生のテーブルにマウスホバーで負荷1本の鉛筆アイコンを必要とCSSで

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>