Correction TP4 jQuery




  • 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

    1. Énoncé
    2. Solution
      • <!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>



    Abonnez vous à notre chaîne YouTube gratuitement