CODEWITHSUNDEEP
javascriptjqueryhtml
NacDan
NacDan

Reputation: 71

How can I apply hover event for multiple elements at the same time?

I am very new to JavaScript and would like to have table data grouped for each row. Each row has 6 table data. I would like the first 3 linked together and the last 3 separate. Creating a className for the columns I want linked together makes all of the tables hover. I would only like the specific row values to be hoverable.

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";
    }
}

I am not sure if there is a better way to do this other than creating a new class name for each row. If I need to do that, is there an easy way to do that dynamically? Please let me know if you'd like to see the actual table. Thank you.

Upvotes: 1

Views: 383

Answers (1)

T&#226;n
T&#226;n

Reputation: 1

Sure, you can use CSS to do that by classifying them based on index:

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>

Reference: :nth-child()

Update:

$('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>

Update 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>

Or if you just want to use that event on 1 row, you can edit the event to:

$('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');

});

Update 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>

Upvotes: 1

Related Questions