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

13 juin 2019    /    Viewed: 856    /    Comments: 0    /    Edit


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

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

Liens Site
jsfiddle jsfiddle
Select table row and keep highlighted using Twitter Bootstrap stackoverflow
Select table row and keep highlighted using Twitter Bootstrap stackoverflow
bootply bootply
Select single table row from bootstrap table stackoverflow
Generating a dynamic HTML table from django template language stackoverflow
Select table row and keep highlighted using Twitter Bootstrap stackoverflow
Select table row and keep highlighted using Twitter Bootstrap stackoverflow
bootply bootply
Table responsive mdbootstrap


Card image cap
profile-image
Daidalos

Je développe le présent site avec le framework python Django. Je m'intéresse aussi actuellement dans le cadre de mon travail au machine learning pour plusieurs projets (voir par exemple) et toutes suggestions ou commentaires sont les bienvenus !