3 votes

AndSolomin34 avatar

comment mettre en évidence les cellules d'un tableau d'une certaine manière lorsqu'on les survole

Demandé el 8 de Mai, 2019
Quand la question a-t-elle été
85 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai besoin de mettre en évidence les cellules du tableau avec la marque 'J' comme ceci : enter image description here

Dans cette image, je passe la souris sur une cellule (celle qui a un bord noir) et certaines cellules autour d'elle changent de couleur. Comment faire ? Je ne peux modifier qu'une seule cellule, ligne ou colonne.

td {
    padding: 8px;
    background-color: #fff;
    font-weight: bold;
}
tr:hover {
    color: #fff;
    background-color: #000;
}

tr:hover td {
    background-color: transparent;
}

<table>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>

        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>
Demandé el 8 de Mai, 2019 par AndSolomin34

Réponses

Trop de publicités?

3voto

Jonathan Gagne avatar
Jonathan Gagne Points 3211

La solution que je propose utilise jQuery afin de lier un évènement sur chaque td:hover . En utilisant each , hover , Math.floor y toggleClass vous pouvez facilement réaliser ce que vous voulez faire.

$(function() {
  $('#my-table td').each(function(index, elem){
    $("#" + elem.id).hover(function(){
      row_index = Math.floor((elem.id - 1) / 5);
      col_index = (elem.id - 1) % 5;

      right_cell_col = col_index + 1;
      top_cell_index = parseInt(elem.id) - 4;
      left_cell_col = col_index - 1;
      bottom_cell_index = parseInt(elem.id) + 5;

      if(left_cell_col >= 0) $("#" + (elem.id - 1)).toggleClass("colored");
      if(right_cell_col <= 4) {
        if (top_cell_index > 0) $("#" + top_cell_index).toggleClass("colored");
        $("#" + (parseInt(elem.id) + 1)).toggleClass("colored");
      }
      if(bottom_cell_index < 26) $("#" + bottom_cell_index).toggleClass("colored");
    });
  });
});

td {
    width: 10px;
    height: 10px;
    border: 1px solid #ddd;
    padding: 8px;
    background-color: #fff;
    font-weight: bold;
}
td:hover {
    border-color: black;
    font-weight: bold;
}
.colored {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table">
    <tr>
        <td id=1></td>
        <td id=2></td>
        <td id=3></td>
        <td id=4></td>
        <td id=5></td>
    </tr>
    <tr>
        <td id=6></td>
        <td id=7></td>
        <td id=8></td>
        <td id=9></td>
        <td id=10></td>
    </tr>
    <tr>
        <td id=11></td>
        <td id=12></td>
        <td id=13></td>
        <td id=14></td>
        <td id=15></td>
    </tr>
    <tr>
        <td id=16></td>
        <td id=17></td>
        <td id=18></td>
        <td id=19></td>
        <td id=20></td>
    </tr>
    <tr>
        <td id=21></td>
        <td id=22></td>
        <td id=23></td>
        <td id=24></td>
        <td id=25></td>
    </tr>
</table>
Répondu el 8 de Mai, 2019 par Jonathan Gagne (3211 Points )

2voto

MERN avatar
MERN Points 2822 
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      border: 1px solid #000;
    }

    table td {
      border: 1px solid #000;
    }

    td {
      text-align: center;
      font-size: 0;
      width: 30px;
      height: 30px;
      background-color: #fff;
      font-weight: bold;
    }

    tr.hover {
      color: #fff;
      background-color: #000;
    }
    /* tr:hover td {
            background-color: transparent;
        } */

    td.hover {
      color: #fff;
      background-color: #000;
    }

    td.center {
      color: #fff;
      background-color: #fff;
      outline: 2px red solid;
    }
  </style>
  <script>
    $(document).ready(function() {
      var HEIGHT = 5;
      var WIDTH = 5;
      $('td').hover(function() {
        var self = $(this);
        var table = self.parent().parent();

        var column = self.index();
        var row = self.parent().index();

        var current = table.find(`tr:eq(${row}) td:eq(${column})`)
        current.toggleClass('center')
        if (column > 0) {
          var before = table.find(`tr:eq(${row}) td:eq(${column - 1})`)
          before.toggleClass('hover');
        }

        if (row < HEIGHT - 1) {
          var bottom = table.find(`tr:eq(${row + 1}) td:eq(${column})`)
          bottom.toggleClass('hover');
        }
        if (column < WIDTH - 1) {
          var next = table.find(`tr:eq(${row}) td:eq(${column + 1})`)
          next.toggleClass('hover');
        }
        if (row > 0 && column < WIDTH - 1) {
          var nextUp = table.find(`tr:eq(${row - 1}) td:eq(${column + 1})`)
          nextUp.toggleClass('hover');
        }
      });
    });
  </script>
</head>

<body>
  <table>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>

      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>
</body>

</html>

Et si vous utilisiez jquery ?

Répondu el 8 de Mai, 2019 par MERN (2822 Points )

-1voto

phiphophe avatar
phiphophe Points 1

Ma solution utilise jquery datatable. L'idée est qu'il suffit de récupérer le nombre de lignes et le nombre de colonnes de la cellule sélectionnée, et d'en déduire les cellules restantes.

 var table1 = $('#dataTable1').DataTable({
  });
 $('#dataTable1 tbody').on( 'mouseenter', 'td', function () {
      var colIdx = table1.cell(this).index().column;
      var rowIdx = table1.cell(this).index().row;

      $(table1.cells().nodes()).removeClass( 'highlight' );
      $(table1.cells().nodes()).removeClass( 'redtable' );
      $(table1.cell(this).node()).addClass( 'redtable' );

      $(table1.cell(rowIdx-2, colIdx).node()).addClass( 'highlight' );
      $(table1.cell(rowIdx+2, colIdx).node()).addClass( 'highlight' );
      $(table1.cell(rowIdx, colIdx+1).node()).addClass( 'highlight' );
      $(table1.cell(rowIdx, colIdx-1).node()).addClass( 'highlight' );
  } );

.redtable {
  background-color: red !important;
}
td.highlight {
  background-color: green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <table class="table table-bordered" id="dataTable1" width="100%" cellspacing="0">
                  <thead>
                    <tr>
                      <th>H và tên</th>
                      <th>ID</th>
                      <th>Ngày sinh</th>
                      <th>Thi gian khám</th>
                      <th>State</th>
                      <th>ST</th>
                      <th>Gii tính</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>H và tên</th>
                      <th>ID</th>
                      <th>Ngày sinh</th>
                      <th>Thi gian khám</th>
                      <th>State</th>
                      <th>ST</th>
                      <th>Gii tính</th>
                    </tr>
                  </tfoot>
                  <tbody>
                    <tr >
                      <td>phecollyxin</td>
                      <td>13548465</td>
                      <td>Edinburgh</td>
                      <td>2020/04/25</td>
                      <td>0</td>
                      <td>0509045265</td>
                      <td>1</td>
                    </tr>
                    <tr >
                      <td>arpririn</td>
                      <td>43668754</td>
                      <td>1985/11/12</td>
                      <td>2019/1/1</td>
                      <td>1</td>
                      <td>0502358614</td>
                      <td>0</td>
                    </tr>
                    <tr >
                        <td>phecollyxin</td>
                        <td>13548465</td>
                        <td>Edinburgh</td>
                        <td>2020/04/25</td>
                        <td>0</td>
                        <td>0509045265</td>
                        <td>1</td>
                      </tr>

                  </tbody>
                </table>

Entrez la description de l'image ici

Répondu el 8 de Mai, 2019 par phiphophe (1 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X