3

Como fazer para quando eu passar o mouse em cima da minha td, mostrar nela o ícone de edição?

Obs: Meu código não funciona:

jQuery Event:

$(".editableSpan").mouseover(function(){
    $("#tdEditable").append("<span id='widthSource'></span><span class='glyphicon glyphicon-pencil'></span>");
});

HTML:

<td id="tdEditable" class="editableSpan"><span id="widthSource"></span></td>

Gostaria que quando o evento for hover em qualquer td da minha table ele mostre o ícone de editar alinhado a direita.

1

1 Resposta 1

3

Veja se esse serve.

$( "td" ).hover(
  function() {
    $( this ).append( $( "<i class='fa fa-pencil'></i>" ) );
  }, function() {
    $( this ).find( ".fa" ).remove();
  }
);
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
.fa{
   float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<table style="width:50%">
  <tr>
    <td>Jill</td>
  </tr>
  <tr>
    <td>Eve</td>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

1
  • 2
    Obrigado pelo retorno. Ótima resposta Commented 9/10/2015 às 12:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .