I have a table with some text data. One of the columns should be clickable: a pop-up for editing this row will appear.
What is the best way to explain for user that clicking on this row will cause a pop-up? I see 4 variants:
<td><a href="#">Smith</a></td>
<td><span style="cursor:pointer; border-bottom: dotted 1px">Jackson</span></td>
<td><button>Doe</button></td>
<td>Johnson <span style="cursor:pointer" class="glyphicon glyphicon-edit"></span>
Here is a fiddle with all of these variants.
The icon is the most appealing as the other ones just show that you will be taken to more info. While the icon is clear that the user will edit.
I would also make it a hover affect for it like so:
$(document).ready(function() {
$('#test2').hover(function(){
$('#test').addClass('glyphicon glyphicon-edit');
},
function(){
$('#test').removeClass('glyphicon glyphicon-edit');
});
});
the #test2
is the cell and #test
is the span.