JQuery Table TD hover and count matches
JQuery Table TD hover and count matches of content.
HTML
<div id='counter'><br/></div><table id="datashow"><tr>
<td value="0">One</td>
<td value="0">55</td>
<td value="0">One</td>
<td value="1">Two</td>
<td value="1">Two</td>
<td value="1">Two</td>
</tr><tr>
<td value="1">Two</td>
<td value="1">Two</td>
<td value="1">Two</td>
<td value="1">Seven</td>
<td value="1">Seven</td>
<td value="1">Seven</td>
<td value="1">2233 444</td>
<td value="1">2233 444</td>
</tr>
</table>
CSS
body{padding:23px;font-family:arial}
td{padding:10px;border-right:1px solid #ddd;cursor:pointer}
.counted{color:#e345cc;font-weight:bold}
span.countip{
position:absolute;
margin-top:-12px;
width:15px;
height:15px;
border:2px solid #fff;
background:#333333;
color:#ffffff;
text-align:center;
padding:2px;
border-radius:5px;
}
JavaScript
$("#datashow tr td").live('touchstart mouseenter',function() {
$('#counter').text('-')
var text1 = $(this).text();
$("tr td").filter(function(i) {
return $(this).text() == text1;
}).addClass('counted');
$('#counter').text($('table').find('.counted').length);
var tipttl = $('table').find('.counted').length;
$(this).append($("<span class='countip'></span>").text(tipttl))
}).mouseout(function(){
$("td").removeClass("counted");
$(".countip").remove();
});