使用JQuery动态隐藏/显示<td>

Question

Using PHP, I am returning a table with rows containing 3 columns each. The third column has an information icon that is hidden unless hovered over. Here's a snippet from the PHP code that generates this table:

$contoutput = $contoutput . '<tr><td>' . $xleft[$i] . '</td><td>' . $xright[$i] . '</td><td class="hiddensourceicon" onMouseOver="showicon(this);">' . findsource($xsource[$i]) . '</td></tr>';

The CSS for hiddensourceicon is simple:

.hiddensourceicon { display: none; }

This way, the said icon doesn't display upon load. I am using JQuery to remove this class, thus "unhiding" the icon upon hover:

function showicon(row2show){ $(row2show).removeClass("hiddensourceicon"); }

But for some reason, the JQuery function refuses to trigger. What am I doing wrong?

Answer 1

It think the trouble comes in when you have something set as display none and are trying to hover on something that doesn't exist one way you could solve this is by using opacity instead of display. If you want to keep using display you will have to take into account something has to be there on the screen to hover on. Here is a quick solution using opacity.

JSFiddle: https://jsfiddle.net/kriscoulson/kg6380z8/1/

You should also stay away from using inline javascript. Such as mouseover="function(args);"

var $hiddenicon = $('.hiddenicon');

$hiddenicon.on('mouseover mouseout', function() {
  var opacity = $(this).css('opacity') == 1 ? 0 : 1;
  $(this).css({
    opacity: opacity
  });
});

table,
th,
td {
  border: 1px solid black;
}
.hiddenicon {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="hiddenicon">Icon</td>
    <td>Things in here</td>
    <td>Other things in here</td>
  </tr>
  <tr>
    <td class="hiddenicon">Icon</td>
    <td>Things in here</td>
    <td>Other things in here</td>
  </tr>
  <tr>
    <td class="hiddenicon">Icon</td>
    <td>Things in here</td>
    <td>Other things in here</td>
  </tr>
</table>

</div>