Menu
I want to display the number of rows of a table using .each() function in jQuery and also using .attr() function. My code is as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="jquery.min.js"></script>
</head>
<body style="width: 290px; padding-left: 520px; padding-top: 155px;">
<table id="mytable" border="1">
<tr style="background-color: #DEB887" class="red"><td>1</td><td>Arun</td><td>B.Tech.</td><td>Sivakasi</td></tr>
<tr style="background-color: ##F5F5DC" class="green"><td>2</td><td>Kumar</td><td>B.Com.</td><td>Madurai</td></tr>
<tr style="background-color: #DEB887" class="red"><td>3</td><td>Rajesh</td><td>B.Sc.</td><td>Coimbatore</td></tr>
<tr style="background-color: ##F5F5DC" class="green"><td>4</td><td>Gopinath</td><td>M.E.</td><td>Tirunelveli</td></tr>
<tr style="background-color: #DEB887" class="red"><td>5</td><td>Deepak</td><td>M.Tech.</td><td>Chennai</td></tr>
<tr style="background-color: ##F5F5DC" class="green"><td>6</td><td>Jerome</td><td>M.C.A.</td><td>Trichy</td></tr>
<tr style="background-color: #DEB887" class="red"><td>7</td><td>Ashok</td><td>B.E.</td><td>Bangalore</td></tr>
<tr style="background-color: ##F5F5DC" class="green"><td>8</td><td>Praveen</td><td>B.Tech.</td><td>Hyderabad</td></tr>
<tr style="background-color: #DEB887" class="red"><td>9</td><td>Albert</td><td>B.B.A.</td><td>Tirupur</td></tr>
<tr style="background-color: ##F5F5DC" class="green"><td>10</td><td>Jebastin</td><td>Ph.D.</td><td>Mumbai</td></tr>
<tr style="background-color: ##F5F5DC" class="green"><td>11</td><td>Stephen</td><td>Ph.D.</td><td>Mumbai</td></tr>
</table><br>
<input type="button" value="Count for odd no colors" id="cnt" name="cnt" onclick="javascript:counting_values();">
</body>
</html>
<script type="text/javascript">
function counting_values()
{
$(function() {
var red = 0 ,green = 0;
$('#mytable tr').each( function() {
if( $(this).attr('red',red) )
red += 1;
if( $(this).attr('green',green) )
green += 1;
});
alert( 'Number of red rows:'+red );
alert( 'Number of green rows:'+green );
});
}
</script>
I want to display the number of rows of red & green classes using .attr() function. But it does not gives me correct output.
If I click on the button, it should show "Number of red rows : 5" and Number of green rows : 6". But now it shows that "Number of red rows : 11" and Number of green rows : 11". This is the total records in the table.
Is my code correct or if there is any changes, please help me.
Thanks in advance.
300
Just set two counters (red and green) and check inside each whether they have the red or green classes:
var red = 0;
var green = 0;
$('#mytable tr').each(function(){
if ($(this).hasClass('red')) {
red++;
}
if ($(this).hasClass('green')) {
green++;
}
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/zoy4L2b5/
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
