Correction TP4 jQuery
Correction TP4 jQuery
-
Objectifs
- Etre capable d’utiliser les sélecteurs jQuery.
-
Exercice 01
-
Énoncé
-
Vous pouvez visualiser l’énoncé de l’exercice
Solution
<!DOCTYPE html>
<head>
<title>table de multiplication</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max=prompt("Combien de lignes de multiplication souhaitez-vous faire?");
var table= $("#tableMultiplication");
var ajoutLigne="";
ajoutLigne="<tr><td>X</td>";
for (var i=1; i<=max; i++)
{
ajoutLigne += "<td>" + i + "</td>";
}
ajoutLigne += "</tr>";
table.append(ajoutLigne);
for (var m=1; m<=max; m++)
{
ajoutLigne="<tr><td>"+m+"</td>";
for (var y=1; y<=max; y++)
{
ajoutLigne += "<td>" + m*y + "</td>";
}
ajoutLigne += "</tr>";
table.append(ajoutLigne);
}
$("td:first").css("background-color","red");
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$("td:even").addClass("even");
$("td:odd").addClass("odd");
max=Number(max)+1;
alert(max);
$("td:lt("+max+")").css( "backgroundColor", "orange" );
$("tr > td:nth-child(1)").css( {"backgroundColor":"orange","Font-Weight":"Bold"});
$("td:first" ).css("background-color","yellow");
});
</script>
<style type="text/css">
td { margin: 3px;
width: 2em;
text-align:center;
}
table{border: 5px solid red;
font-size: 20px;}
tr.even td.even { background-color: #ee2288;
}
tr.even td.odd { background-color: #00ff88;
}
tr.odd td.even { background-color: #ee44cc;
}
tr.odd td.odd { background-color: #7799dd;
}
</style>
</head>
<body>
<table id="tableMultiplication">
</table>
</body>
</html>
Exercice 02
-
Énoncé
-
Solution
-
Vous pouvez visualiser l’énoncé de l’exercice
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cours-jquery > li').addClass('horizontal');
});
</script>
<style type="text/css">
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
</style>
</head>
<body>
<ul id="cours-jquery">
<li>Présentation de jQuery
<ul>
<li>Historique du jquery</li>
<li>Présentation de jQuery</li>
<li>Comprendre jQuery</li>
</ul>
</li>
<li>Mise en oeuvre de jQuery
<ul>
<li>Installation de jQuery</li>
<li>La Syntaxe de base de jQuery</li>
<li>Les bases de jQuery</li>
</ul>
</li>
<li>Sélecteurs en jQuery
<ul>
<li>Les sélecteurs de base en jQuery
<ul>
<li>Tp1 sélecteurs jquery</li>
<li>Tp2 sélecteurs jquery</li>
</ul>
</li>
<li>Les sélecteurs hiérarchiques</li>
<li>Filtres en jQuery</li>
</ul>
</li>
</ul>
</body>
</html>