如何显示将显示弹出窗口的链接

Question

我有一个包含一些文本数据的表格。其中一列应该是可点击的：出现编辑此行的弹出窗口。

什么是最好的方式来解释用户点击这一行会导致弹出？ 我看到4个变种：

1. 超链接
   <td><a href="#">Smith</a></td>
   不好原因通常链接打开新的页面。
2. 虚线下划线链接
   <td><span style="cursor:pointer; border-bottom: dotted 1px">Jackson</span></td>
   用户将期望悬停帮助窗口。
3. 按钮
   <td><button>Doe</button></td>
   看起来不好，也不清楚点击后会发生什么。
4. 可点击图标
   <td>Johnson <span style="cursor:pointer" class="glyphicon glyphicon-edit"></span>
   我想避免多次重复相同的元素。

Here is a fiddle具有所有这些变体。

Answer 1

该图标是最吸引人的，因为其他人只是表明你会被带到更多的信息。虽然图标很清楚，用户将进行编辑。

我也想使它成为一个悬停它影响像这样：

$(document).ready(function() {  
    $('#test2').hover(function(){  
     $('#test').addClass('glyphicon glyphicon-edit');  
    },  
    function(){  
     $('#test').removeClass('glyphicon glyphicon-edit');  
    }); 
}); 

的#test2是细胞和#test是跨度。

http://jsfiddle.net/Ugc9C/2/