Как я могу применить событие hover для нескольких элементов одновременно?

Question

Я очень плохо знаком с JavaScript и хотел бы сгруппировать данные таблицы для каждой строки. Каждая строка имеет 6 табличных данных. Я хотел бы, чтобы первые 3 были связаны вместе, а последние 3 - отдельными. Создание className для столбцов, которые я хочу связать вместе, приводит к зависанию всех таблиц. Мне бы хотелось, чтобы конкретные значения строк были доступны для перемещения.

var table = document.getElementsByTagName("tbody");

for (var i = 0; i < table.length-1; i++){

    var currentTable = table[i];
    var rows = currentTable.getElementsByTagName("tr");

    for(var j = 3; j < rows.length-1; j++){

        var c = rows[j].cells;

        c[0].className = "fall";
        c[1].className = "fall";
        c[2].className = "fall";
        // for each row make these three selectable

        c[3].className = "spring";
        c[4].className = "spring";
        c[5].className = "spring";
    }
}

Я не уверен, что существует лучший способ сделать это, кроме создания нового имени класса для каждой строки. Если мне нужно сделать это, есть ли простой способ сделать это динамически? Пожалуйста, дайте мне знать, если вы хотите увидеть фактическую таблицу. Спасибо.

Answer 1

Конечно, вы можете использовать CSS для этого, классифицируя их по индексу:

td:nth-child(1), td:nth-child(2), td:nth-child(3) {
  color: red;
}

td:nth-child(4), td:nth-child(5), td:nth-child(6) {
  color: green;
}

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
  </tbody>
</table>

Ссылка: : nth-child ()

---

Обновление:

$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseover', function () {
  var index = $(this).index() + 1;
  
  $('table td:nth-child(' + index + ')').css('color', 'red');
});

$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseout', function () {
  var index = $(this).index() + 1;
  
    $('table td:nth-child(' + index + ')').css('color', 'black');
});

$('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseover', function () {
  var index = $(this).index() + 1;
  
  $('table td:nth-child(' + index + ')').css('color', 'green');
});

$('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseout', function () {
  var index = $(this).index() + 1;
  
    $('table td:nth-child(' + index + ')').css('color', 'black');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Table 1</h3>

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

<h3>Table 2</h3>

<table>
  <tbody>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
  </tbody>
</table>

---

Обновление 2:

$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseover', function () {

  $('td:nth-child(1),td:nth-child(2),td:nth-child(3)').css('color', 'red');
  
});

$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseout', function () {

  $('td:nth-child(1),td:nth-child(2),td:nth-child(3)').css('color', 'black');
  
});

$('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseover', function () {

    $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').css('color', 'green');
    
});

$('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseout', function () {

    $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').css('color', 'black');


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Table 1</h3>

<table>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

<h3>Table 2</h3>

<table>
  <tbody>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
  </tbody>
</table>

Или, если вы просто хотите использовать это событие в 1 строке, вы можете отредактировать событие следующим образом:

$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseover', function () {

  $(this).parent().find('td:nth-child(1),td:nth-child(2),td:nth-child(3)').css('color', 'red');

});

---

Обновление 3:

$('td').on('mouseover', function () {
  var tr = $(this).parent();
  
  var index = $(this).index();
  
  var cells = index < 3 ? [1, 2, 3] : [4, 5, 6];
  
  var color = index < 3 ? 'red' : 'green';
  
  cells.forEach(function (x) {
    tr.find('td:nth-child(' + x + ')').css('color', color);
  });
});

$('td').on('mouseout', function () {
  $(this).parent().find('td').css('color', 'black');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Table 1</h3>

<table>
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
      <th>H4</th>
      <th>H5</th>
      <th>H6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

<h3>Table 2</h3>

<table>
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
      <th>H4</th>
      <th>H5</th>
      <th>H6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
  </tbody>
</table>