Utilize Bootstrap's table-hover feature in combination with rowspan to effectively highlight every row associated with a specific

Question

Utilize Bootstrap's table-hover feature in combination with rowspan to effectively highlight every row associated with a specific

I am attempting to replicate the functionality of the table-hover class on a Bootstrap table that contains multiple cells with different rowspan values. This means I want to highlight every cell within the same row. Below is an example demonstrating the current behavior of the table-hover class:

.td-centered {
  vertical-align: middle!important;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<table class="table text-center text-nowrap table-bordered table-hover">
  <thead>
    <tr>
      <th scope="col" class="h5 font-weight-bold">
        Date
      </th>
      [......]

The desired behavior is depicted below:

.td-centered {
  text-align: center;
  vertical-align: middle !important;
}

.red-bg {
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table text-center text-nowrap table-bordered">
  <thead>
    <tr>
      <th scope="col" class="h5 font-weight-bold">
        Date
      </th>
     [...]
  </tbody>
</table>

To achieve this, jQuery may be necessary. While utilizing only Bootstrap for the solution is preferable, standard CSS can also be used. Any assistance or insight you can provide would be greatly appreciated :)

html css bootstrap-4 hover

Answer 1

Answer №1

This is the solution I devised:

jQuery(() => {
  if ($("#table-multi-hover").length) {
    const headerValues = Array.from($("thead")[0].children[0].children)
      .map(item => item.innerText.toLowerCase());

    let table = [];

    const tableCells = Array.from($("tbody")[0].children)
      .map(item => item.children)
      .map(item => Array.from(item));

    for (let i = 0; i < tableCells.length; i++) {
      let tempObj = {};
      for (let j = 0; j < tableCells[i].length; j++) {
        tempObj[tableCells[i][j].attributes.rep.value] = tableCells[i][j];
      }

      for (let j = 0; j < headerValues.length; j++) {
        if (i != 0 && tempObj[headerValues[j]] == undefined) {
          tempObj[headerValues[j]] = table[i - 1][headerValues[j]];
        }
      }
      table.push(Object.assign({}, tempObj));
    }

    $("tbody td, tbody th").on("mouseover", event => {
      const rowIndex = parseInt(event.currentTarget.parentElement.attributes.i.value);
      const rep = event.currentTarget.attributes.rep.value;
      const rowspan = event.currentTarget.attributes.rowspan != undefined ?
        parseInt(event.currentTarget.attributes.rowspan.value) : 1;

      for (let i = 0; i < rowspan; i++) {
        for (let j in table[rowIndex + i]) {
          $(table[rowIndex + i][j]).addClass("red-bg");
        }
      }
    });

    $("tbody td, tbody th").on('mouseleave', event => {
      const rowIndex = parseInt(event.currentTarget.parentElement.attributes.i.value);
      const rep = event.currentTarget.attributes.rep.value;
      const rowspan = event.currentTarget.attributes.rowspan != undefined ?
        parseInt(event.currentTarget.attributes.rowspan.value) : 1;

      for (let i = 0; i < rowspan; i++) {
        for (let j in table[rowIndex + i]) {
          $(table[rowIndex + i][j]).removeClass("red-bg");
        }
      }
    });
  }
});

td,
th {
  text-align: center;
  vertical-align: middle !important;
}

.red-bg {
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-center text-nowrap table-bordered" id="table-multi-hover">
  <thead>
    <tr>
      <th scope="col" class="h5 font-weight-bold">
        Date
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Title
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Amount
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Price
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Value
      </th>
    </tr>
  </thead>

  <tbody>
    <tr i="0">
      <th rowspan="3" scope="row" rep="date">2020-06-25</th>
      <td rowspan="2" rep="title">Some name 1</td>
      <td rep="amount">2</td>
      <td rep="price">30.00 PLN</td>
      <td rep="value">60.00 PLN</td>
    </tr>
    <tr i="1">
      <td rep="amount">1</td>
      <td rowspan="2" rep="price">20.00 PLN</td>
      <td rep="value">20.00 PLN</td>
    </tr>
    <tr i="2">
      <td rep="title">Some name 2</td>
      <td rep="amount">2</td>
      <td rep="value">40.00 PLN</td>
    </tr>
    <tr i="3">
      <th rowspan="3" scope="row" rep="date">2020-06-24</th>
      <td rowspan="2" rep="title">Some name 1</td>
      <td rep="amount">2</td>
      <td rep="price">30.00 PLN</td>
      <td rep="value">60.00 PLN</td>
    </tr>
    <tr i="4">
      <td rep="amount">1</td>
      <td rowspan="2" rep="price">20.00 PLN</td>
      <td rep="value">20.00 PLN</td>
    </tr>
    <tr i="5">
      <td rep="title">Some name 2</td>
      <td rep="amount">2</td>
      <td rep="value">40.00 PLN</td>
    </tr>
  </tbody>
</table>

The required steps to implement this solution are:

Assign the id attribute to your table and set it as table-multi-hover.
Include the i attribute in your tr within tbody, starting at index 0.
Add the rep attribute to your td and th with values corresponding to the values in the table header in lowercase.

Note that this solution assumes a continuous table without gaps and no colspan attributes set. Additionally, it relies on the existence of a thead like shown in the code snippet. The added class to elements is named red-bg.

Answer 2

This is the solution I devised:

jQuery(() => {
  if ($("#table-multi-hover").length) {
    const headerValues = Array.from($("thead")[0].children[0].children)
      .map(item => item.innerText.toLowerCase());

    let table = [];

    const tableCells = Array.from($("tbody")[0].children)
      .map(item => item.children)
      .map(item => Array.from(item));

    for (let i = 0; i < tableCells.length; i++) {
      let tempObj = {};
      for (let j = 0; j < tableCells[i].length; j++) {
        tempObj[tableCells[i][j].attributes.rep.value] = tableCells[i][j];
      }

      for (let j = 0; j < headerValues.length; j++) {
        if (i != 0 && tempObj[headerValues[j]] == undefined) {
          tempObj[headerValues[j]] = table[i - 1][headerValues[j]];
        }
      }
      table.push(Object.assign({}, tempObj));
    }

    $("tbody td, tbody th").on("mouseover", event => {
      const rowIndex = parseInt(event.currentTarget.parentElement.attributes.i.value);
      const rep = event.currentTarget.attributes.rep.value;
      const rowspan = event.currentTarget.attributes.rowspan != undefined ?
        parseInt(event.currentTarget.attributes.rowspan.value) : 1;

      for (let i = 0; i < rowspan; i++) {
        for (let j in table[rowIndex + i]) {
          $(table[rowIndex + i][j]).addClass("red-bg");
        }
      }
    });

    $("tbody td, tbody th").on('mouseleave', event => {
      const rowIndex = parseInt(event.currentTarget.parentElement.attributes.i.value);
      const rep = event.currentTarget.attributes.rep.value;
      const rowspan = event.currentTarget.attributes.rowspan != undefined ?
        parseInt(event.currentTarget.attributes.rowspan.value) : 1;

      for (let i = 0; i < rowspan; i++) {
        for (let j in table[rowIndex + i]) {
          $(table[rowIndex + i][j]).removeClass("red-bg");
        }
      }
    });
  }
});

td,
th {
  text-align: center;
  vertical-align: middle !important;
}

.red-bg {
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-center text-nowrap table-bordered" id="table-multi-hover">
  <thead>
    <tr>
      <th scope="col" class="h5 font-weight-bold">
        Date
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Title
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Amount
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Price
      </th>
      <th scope="col" class="h5 font-weight-bold">
        Value
      </th>
    </tr>
  </thead>

  <tbody>
    <tr i="0">
      <th rowspan="3" scope="row" rep="date">2020-06-25</th>
      <td rowspan="2" rep="title">Some name 1</td>
      <td rep="amount">2</td>
      <td rep="price">30.00 PLN</td>
      <td rep="value">60.00 PLN</td>
    </tr>
    <tr i="1">
      <td rep="amount">1</td>
      <td rowspan="2" rep="price">20.00 PLN</td>
      <td rep="value">20.00 PLN</td>
    </tr>
    <tr i="2">
      <td rep="title">Some name 2</td>
      <td rep="amount">2</td>
      <td rep="value">40.00 PLN</td>
    </tr>
    <tr i="3">
      <th rowspan="3" scope="row" rep="date">2020-06-24</th>
      <td rowspan="2" rep="title">Some name 1</td>
      <td rep="amount">2</td>
      <td rep="price">30.00 PLN</td>
      <td rep="value">60.00 PLN</td>
    </tr>
    <tr i="4">
      <td rep="amount">1</td>
      <td rowspan="2" rep="price">20.00 PLN</td>
      <td rep="value">20.00 PLN</td>
    </tr>
    <tr i="5">
      <td rep="title">Some name 2</td>
      <td rep="amount">2</td>
      <td rep="value">40.00 PLN</td>
    </tr>
  </tbody>
</table>

The required steps to implement this solution are:

Assign the id attribute to your table and set it as table-multi-hover.
Include the i attribute in your tr within tbody, starting at index 0.
Add the rep attribute to your td and th with values corresponding to the values in the table header in lowercase.

Note that this solution assumes a continuous table without gaps and no colspan attributes set. Additionally, it relies on the existence of a thead like shown in the code snippet. The added class to elements is named red-bg.

Utilize Bootstrap's table-hover feature in combination with rowspan to effectively highlight every row associated with a specific

Answer №1

Similar questions

Is it possible to access a file on the client's PC without transferring the file to the server?

Guide to adjusting icon placement on top of an image using Bootstrap 4

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Efficiently Structuring Your Email Lists in PHP

Implementing automatic activation of a tab upon page load using Angular

Issue: The system does not recognize 'cleancss' as an internal or external command

Is it possible to upload a file to my web application without having configured any backend system?

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Embedding JavaScript within an HTML document

Tips for adding a class to an SVG when clicked

Unable to choose multiple sentences within an HTML Page displayed in a UIWebView

Trigger the onChange event for a number input using JQuery

Using Python with Selenium, automate the process of clicking on each list item within

Adjust the color of text in an input field as you type (css)

Flask does not display images in CSS files

Particle JS - Taking over the entire screen

Having trouble styling my Aside element correctly

`Error with Bootstrap breakpoints in mobile display`

What is the best technique for creating a preloader that can seamlessly fill the background of a vector image?

Attempting to conceal image previews while incorporating pagination in Jquery