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

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/