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

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/