Added dirocty from javascript to jquery
This commit is contained in:
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Challenge B</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.js"
|
||||
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
|
||||
crossorigin="anonymous"></script>
|
||||
<style>
|
||||
td, th {
|
||||
width: 5rem;
|
||||
height: 2rem;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
background: lightblue;
|
||||
border-color: white;
|
||||
}
|
||||
body {
|
||||
padding: 1rem;
|
||||
font-family: Roboto;
|
||||
}
|
||||
/*class to be added to jquery function to change row colors*/
|
||||
.selection{
|
||||
background-color: #c65353;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--create a table-->
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Country</th>
|
||||
<th>Price</th>
|
||||
<th>Nutrition</th>
|
||||
<th>Category</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Spinach</th>
|
||||
<td>America</td>
|
||||
<td>28</td>
|
||||
<td>90</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Carrots</th>
|
||||
<td>France</td>
|
||||
<td>56</td>
|
||||
<td>75</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Broccoli</th>
|
||||
<td>Bulgaria</td>
|
||||
<td>12</td>
|
||||
<td>70</td>
|
||||
<td>Veg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Orange</th>
|
||||
<td>Morocco</td>
|
||||
<td>15</td>
|
||||
<td>50</td>
|
||||
<td>Fruit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tangerine</th>
|
||||
<td>Cyprus</td>
|
||||
<td>12</td>
|
||||
<td>25</td>
|
||||
<td>Fruit</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--add your own jquery files here-->
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
//will wait until page ready
|
||||
$(document).ready(function() {
|
||||
/*when table header is clicked , removes selection class from all other table rows and
|
||||
adds the selection class to this table headers row only*/
|
||||
$("th").click(function(){
|
||||
$("tr").children().removeClass("selection");
|
||||
$(this).siblings().addClass("selection");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user