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

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?

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>

after hiding to show it again you need to make display:block otherwise it wont display, since you are using jquery you can use .hide() and .show() methods ref-http://www.w3schools.com/jquery/jquery_hide_show.asp

Try this:

<?php
$contoutput = $contoutput . '<table cellspacing="5"><tr><td>' . "11" . '</td><td>' . "2222" . '</td><td id="xyz"  onMouseOver="showicon(this.id);"><span class="hiddensourceicon" >' . "hiiiii" . '</span></td></tr></table>';
echo $contoutput;
?>
<style>
.hiddensourceicon { display: none; }
</style>
<script>
function showicon(row2show){
var abc = "#"+row2show+" span";

$(abc).removeClass("hiddensourceicon"); }
</script>

One issue you'll run up against in your current question: hiddensourceicon is set to display:none, so there's nothing to hover over. If you set it to opacity:0, it will still be there to hover over. Plus, opacity can be animated - which may or may not be needed.

Below is one method, perhaps someone else will have something more efficient, and here's a fiddle of it:

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

CSS:

.hiddensourceicon { 
  opacity:0;
}

.show {
  opacity:1;
}

jQuery:

$( ".hiddensourceicon" ).hover(function() {
  $(this).toggleClass('show');
});