On zebra stripes table, how can I highlight every rows that are selected (instead of every other row) ?[Answered] RSS

• • Reply
  faujong

  Member

  10 Points

  139 Posts

  On zebra stripes table, how can I highlight every rows that are selected (instead of every other...

  Apr 11, 2017 03:38 PM|faujong|LINK

  Our table use zebra-stripes, which is what we want.

  <table tabindex="0" class="grid-content-table zebra-stripes">

  When selecting multiple rows, the table highlights every other row.
  Is it possible when selecting multiple rows, all selected rows are highlighted instead of every other row ?
  In the example below, I would like all rows selected to have background color of #278efc.

  .theme-entry .grid table.grid-content-table tr.even td
  {
  	background-color: #ffffff;
  }
  
  .theme-entry .grid table.grid-content-table tr td
  {
  	background-color: #f1f9fc;
  }
  
  .theme-entry .grid table.grid-content-table tr.selected td
  {
  	background-color: #278efc;
  }
  

  When I select 2 rows in a row, and I inspect the element, it says this:

  <tr class="selected highlighted"></tr>
  <tr class="selected"></tr>

  Thank you.

• • Reply
  Deepak Panch...

  Contributor

  2990 Points

  1210 Posts

  Re: On zebra stripes table, how can I highlight every rows that are selected (instead of every ot...

  Apr 12, 2017 09:31 AM|Deepak Panchal|LINK

  Hi faujong,

  I try to reproduce the issue on my side and I got the same out put as yours.

  check below.

  

  I find that there are already background color is available at even number of rows and its priority is high.

  so because of this reason the color is not get changed.

  so here we need to set the priority of highlighting color to high.

  so you just need to change your css like below.

   

  .theme-entry .grid table.grid-content-table tr.selected td
  {
  	background-color: #278efc ! important;
  }
  

  Output:

  

  code:

  HTML:

  <table id="tableStudent" border="1">
      <thead>
          <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Class</th>
          </tr>
      </thead>
      <tbody>
          <tr onmousedown="RowClick(this,false);">
              <td>1</td>
              <td>John</td>
              <td>4th</td>
          </tr>
           <tr onmousedown="RowClick(this,false);">
              <td>2</td>
              <td>Jack</td>
              <td>5th</td>
          </tr>
           <tr onmousedown="RowClick(this,false);">
              <td>3</td>
              <td>Michel</td>
              <td>6th</td>
          </tr>
          <tr onmousedown="RowClick(this,false);">
              <td>4</td>
              <td>Mike</td>
              <td>7th</td>
          </tr>
          <tr onmousedown="RowClick(this,false);">
              <td>5</td>
              <td>Yke</td>
              <td>8th</td>
          </tr>
           <tr onmousedown="RowClick(this,false);">
              <td>6</td>
              <td>4ke</td>
              <td>9th</td>
          </tr>
          <tr onmousedown="RowClick(this,false);">
              <td>7</td>
              <td>7ke</td>
              <td>10th</td>
          </tr>
      </tbody>
  </table>

  JavaScript:

  var lastSelectedRow;
  var trs = document.getElementById('tableStudent').tBodies[0].getElementsByTagName('tr');
  
  // disable text selection
  document.onselectstart = function() {
      return false;
  }
  
  function RowClick(currenttr, lock) {
      if (window.event.ctrlKey) {
          toggleRow(currenttr);
      }
      
      if (window.event.button === 0) {
          if (!window.event.ctrlKey && !window.event.shiftKey) {
              clearAll();
              toggleRow(currenttr);
          }
      
          if (window.event.shiftKey) {
              selectRowsBetweenIndexes([lastSelectedRow.rowIndex, currenttr.rowIndex])
          }
      }
  }
  
  function toggleRow(row) {
      row.className = row.className == 'selected' ? '' : 'selected';
      lastSelectedRow = row;
  }
  
  function selectRowsBetweenIndexes(indexes) {
      indexes.sort(function(a, b) {
          return a - b;
      });
  
      for (var i = indexes[0]; i <= indexes[1]; i++) {
          trs[i-1].className = 'selected';
      }
  }
  
  function clearAll() {
      for (var i = 0; i < trs.length; i++) {
          trs[i].className = '';
      }
  }

  CSS:

  .selected {
      background: #278efc !important;
      
  }
  table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
  }
  
  td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }
  
  tr:nth-child(even) {
      background-color: #dddddd;
      
      
  }

  JSFiddle Demo

  Regards

  Deepak

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  faujong

  Member

  10 Points

  139 Posts

  Re: On zebra stripes table, how can I highlight every rows that are selected (instead of every ot...

  Apr 12, 2017 02:13 PM|faujong|LINK

  Yay ! That's it !
  Thank you Very much !

• • Reply
  Deepak Panch...

  Contributor

  2990 Points

  1210 Posts

  Re: On zebra stripes table, how can I highlight every rows that are selected (instead of every ot...

  Apr 13, 2017 10:01 AM|Deepak Panchal|LINK

  Hi faujong,

  I find that your issue is solved now.

  but you did not mark the answer.

  I suggest you to mark the answer so that we can close this thread.

  if you do not mark the answer then this thread will remain open on our side.

  Regards

  Deepak

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  faujong

  Member

  10 Points

  139 Posts

  Re: On zebra stripes table, how can I highlight every rows that are selected (instead of every ot...

  Apr 17, 2017 03:02 PM|faujong|LINK

  Oh..sorry..I thought I did that already.

  Done