JS-fonction appliquant effets CSS

+exemples de sélection avec la syntaxe JQuery

by M.V. 414

HTML

<button id="csstableau">Afficher le CSS du tableau</button>
      <br>
      <br>
     
      <table id="tableau" cellspacing="0">
          <tr>
      <td>Eleve 1</td>
      <td>Eleve 2</td>
      <td>Eleve 3</td>
      <td>Eleve 4</td>
          </tr>
          <tr>
      <td>10</td>
      <td>7</td>
      <td>9</td>
      <td>7</td>
          </tr>
          <tr>
     <td>20</td>
     <td>14</td>
     <td>18</td>
    <td>14</td>
          </tr>
       </table>
       <br>

<button id="remove">Effacer le tableau</button>

JavaScript

//Définition de la variable
var tab = $("#tableau");
var bouton = $("#csstableau")

//Variable pour stocker les infos
var CSS = function() {
  //coloration de la ligne 3 en vert
  tab.find("tr").eq(2).css('color', 'green');
  //coloration de la troisieme cellule en bleu
  tab.find("td").eq(3).css('color', 'blue');

  //création de bordures
  tab.find("td").css({'border': '1px solid black','padding': '10px' });}

//bouton relié à sa fonction
bouton.click(CSS);

//attribution d'une variable au bouton pour effacer
var remove = $("#remove")
  //création de la vraiable pour effacer
var rmtab = function() {
    //variable pour le tableau qui sert a enlever le tableau
    tab.remove();}
  //Fonction relié au bouton
remove.click(rmtab);