如何显示一个链接，它将显示弹出窗口

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>
   我想避免多次重复相同的元素。

这是所有这些变体的小提琴 。

Answer 1

该图标最具吸引力，因为其他图标仅表明您将获得更多信息。 清除图标后，用户将进行编辑。

我也会像这样使它产生悬停效果：

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

#test2是单元格， #test2 #test是跨度。

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