Comment cliquer sur la ligne d'un tableau html et la mettre en valeur ?


Exemple de comment cliquer sur la ligne d'un tableau html et la mettre en valeur

Table des matières

Code source

Un exemple de tableau (inspiré de l'example sur jsfiddle)

Comment cliquer sur la ligne d'un tableau html et la mettre en valeur ?

Résultat si on clique sur une ligne:

Comment cliquer sur la ligne d'un tableau html et la mettre en valeur ?

Voici le code source permettant de reproduire le tableau présenté sur les images:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


<style>

.table-scroll {
    position:relative;
    margin:auto;
}
.table-wrap {
    width:100%;
    overflow:auto;
}
.table-scroll table {
    width:100%;
    margin:auto;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll th, .table-scroll td {
    padding:10px 10px;
    background:#fff;
    white-space:nowrap;
    vertical-align:top;

    font-size: 15px;
    font-family: Yellowtail;    
    color: black;

}

tr  {
   text-align: center;
}

.table-scroll tbody th {
   color: #06a;
}

.table-striped tbody tr:nth-child(odd) td {
  background-color: white;
}

.table-striped tbody tr.highlight td { 
    background-color: lightgray;
}

</style>


</head>
<body>


<div id="table-scroll" class="table-scroll" style='max-width:500px;margin-top: 200px;'>
  <div class="table-wrap">
    <table id="mytable" class="table-striped">
      <thead>
        <tr>
          <th class="fixed-side" scope="col">&nbsp;</th>
          <th scope="col">Header 1</th>
          <th scope="col">Header 2</th>
          <th scope="col">Header 3</th>
          <th scope="col">Header 4</th>
          <th scope="col">Header 5</th>
          <th scope="col">Header 6</th>
          <th scope="col">Header 7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="fixed-side">Product row 1</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 2</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 3</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 4</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 5</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 6</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
</script>

</body>

</html>

Références

Image

of