Web
Analytics
Jquery Each Example to change alternate row color | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Example 1

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”JS/jquery-2.2.3.js”></script>
<script>
$(document).ready(function () {

$(“tr”).each(function (index) {
if(index%2==0)
{

$(this).css(“background-color”, “red”);
}
else
{
$(this).css(“background-color”, “yellow”);
}
})

})
</script>

</head>
<body>
<table border=”1″ width=”300px”>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>3</td>
<td>Ram3</td>

</tr>
<tr>
<td>4</td>
<td>Ram4</td>

</tr>

</table>
</body>
</html>

 

Example 2: To Get Text of alternate rows

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”JS/jquery-2.2.3.js”></script>
<script>
$(document).ready(function () {
var data = “”;
$(“tr”).each(function (index) {
if(index%2==0)
{
data += $(this).text();
$(this).css(“background-color”, “red”);
}
else
{
$(this).css(“background-color”, “yellow”);
}
})
alert(data);

})
</script>

</head>
<body>
<table border=”1″ width=”300px”>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>1</td>
<td>Ram</td>

</tr>
<tr>
<td>2</td>
<td>Ram1</td>

</tr>
<tr>
<td>3</td>
<td>Ram3</td>

</tr>
<tr>
<td>4</td>
<td>Ram4</td>

</tr>

</table>
</body>
</html>