Added dirocty from javascript to jquery

This commit is contained in:
2025-11-20 16:20:58 +03:00
parent 31a20b5fe5
commit 9202203116
351 changed files with 7583 additions and 1346 deletions

View File

@@ -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>

View File

@@ -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");
});
});