Slip 7 Write a jQuery code to create a zebra stripes table effect.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 2px solid
#4d4dff;
padding: 5px;
}
table tr th{
border: 2px solid
#4d4dff;
padding: 5px;
}
.zebra{
background-color:
#ff0001;
}
</style>
<script>
$(document).ready(function(){
$("tr:odd").addClass("zebra");
});
</script>
<title>Create a Zebra Stripes table effect</title>
</head>
<body>
<div class="table_style">
<table>
<tr>
<th>Student Name</th>
<th>Marks in DBMS</th>
</tr>
<tr>
<td>Akshay</td>
<td>85.00</td>
</tr>
<tr>
<td>Sudhir</td>
<td>90.00</td>
</tr>
<tr>
<td>Kirti</td>
<td>75.00</td>
</tr>
<tr>
<td>Manasi</td>
<td>90.00</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 2px solid
#4d4dff;
padding: 5px;
}
table tr th{
border: 2px solid
#4d4dff;
padding: 5px;
}
.zebra{
background-color:
#ff0001;
}
</style>
<script>
$(document).ready(function(){
$("tr:odd").addClass("zebra");
});
</script>
<title>Create a Zebra Stripes table effect</title>
</head>
<body>
<div class="table_style">
<table>
<tr>
<th>Student Name</th>
<th>Marks in DBMS</th>
</tr>
<tr>
<td>Akshay</td>
<td>85.00</td>
</tr>
<tr>
<td>Sudhir</td>
<td>90.00</td>
</tr>
<tr>
<td>Kirti</td>
<td>75.00</td>
</tr>
<tr>
<td>Manasi</td>
<td>90.00</td>
</tr>
</table>
</div>
</body>
</html>
//Output
No comments:
Post a Comment