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

Daidalos June 13, 2019


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

Licence


Activity


Google Ads