Table with Rowspan Hover and Zebra Effect

Bootstrap table-hover with rowspan to highlight all rows the cell belongs to

I came up with this solution:

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>

Table border top for rowspan

You could give a try to extend the border via an absolute pseudo element:

table {  border: none;  border-spacing:0;  width:200px;  overflow:hidden;/* hide pseudo overflowing */} table tr td + td {  border-top: solid 1px #ccc;  position:relative;/* make it the coordonates reference for the absolute positionned pseudo */}table tr td + td:before {  content:'';  position:absolute;  width:100%;  right:100%;  top:-1px;/* climb up the size of parent's border */  border-top: inherit;/* draw same border */}

<table>  <tbody>    <tr>      <td>01</td>      <td rowspan="3">ABC</td>    </tr>    <tr>      <td>02</td>    </tr>    <tr>      <td>03</td>    </tr>    <tr>      <td>04</td>      <td>DEF</td>    </tr>    <tr>      <td>05</td>      <td>GHI</td>    </tr>   <tr>      <td>06</td>      <td rowspan="2">JKL</td>    </tr>   <tr>      <td>07</td>    </tr>   <tr>      <td>08</td>      <td>MNO</td>    </tr>   <tr>      <td>09</td>      <td>PQR</td>    </tr>    <tr>      <td>10</td>      <td rowspan="2">STU</td>    </tr>   <tr>      <td>11</td>    </tr>   <tr>      <td>12</td>      <td>VWX</td>    </tr>   <tr>      <td>13</td>      <td>YZ</td>    </tr>  </tbody></table>

Unable to set different hover background colors in a table in dark mode/light mode

The fastest/easiest way keeping your current code is to just check the data-theme attribute you set using switchTheme() and set colours accordingly.

$("body").on("mouseover", "table tr", function(){
    let tColor = (document.documentElement.getAttribute('data-theme') === 'dark') ? 'blue' : 'red';
    $(this).css("background", tColor)
});

$("body").on("mouseout", "table tr", function(){
    let tColor = (document.documentElement.getAttribute('data-theme') === 'dark') ? 'green' : 'white';
    $(this).css("background", tColor)
});

I believe it is better to just remove the background on mouseout to default back to the stylesheet defined background:

$("body").on("mouseout", "table tr", function(){
    $(this).css("background", "")
});

Yet like this the colours are not really defined in the stylesheet. Alternatively you could set the background of two hidden elements (hover/normal) in the stylesheet depending on the theme and get the computedStyle.

Css: scroll table with fixed header with multiple tbody

demo - http://jsfiddle.net/5KJka/928/

warp the table inside main table td so that the scroll is not effected

    table.main {      display: table;      width: 100%;    }    table.main > thead,    table.main > tbody {      float: left;      width: 100%;    }    table.main > tbody {      overflow: auto;      height: 150px;    }    table tr {      width: 100%;      display: table;      text-align: left;    }    table th,    table td {      width: 33%;    }    table.main table tbody:nth-child(odd) {      background: #CCC;    }    table.main table tbody:hover td[rowspan],    table.main table tr:hover td {      background: red;    }    table.main table {      width: 100%;      border-collapse: collapse;    }    table.main table td,    table.main table th {      padding: 20px;      border: 1px solid black;    }

<table class="main">  <thead>    <tr>      <th><span class="text">album</span>
      </th>      <th><span class="text">song</span>
      </th>      <th><span class="text">genre</span>
      </th>    </tr>  </thead>  <tbody>    <tr>      <td>        <table>          <tbody>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>          </tbody>          <tbody>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>          </tbody>          <tbody>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>            <tr>              <td>test</td>              <td>test</td>              <td>test</td>            </tr>          </tbody>        </table>      </td>    </tr>  </tbody></table>

---

Related Topics