How can I select a table row together with its previous one?

Question

I have a table where the first column stretches over two rows. The following columns have two separate rows.

The table needs to consist of many of these "doubled rows". So far, no problem.

The style should be a zebra-pattern, which I achieve with this code (note, the CSS is in react/glamorous format):

const StripedTable = glamorous(Table)({
  '& th, & td': {
    padding: '4px',
  },
  '& tfoot tr': {
    background: '#DDDDDD',
  },

  '@media screen': {
    ['& > tbody:nth-of-type(even), ' +
    '& > tbody:only-of-type > tr:nth-of-type(even)']: {
      backgroundColor: '#EEEEEE',
    },
    ['& > tbody:not(:only-of-type):hover, ' +
    '& > tbody:only-of-type > tr:hover']: {
      background: '#DDDDDD',
    },
  },
},
  ({doubleRow}) => {
    if (doubleRow) {
      return {
        '@media screen': {
          // overwrite standard striped coloring that is used for "normal" table rows
          ['& > tbody:nth-of-type(even), ' +
          '& > tbody:only-of-type > tr:nth-of-type(even)']: {
            background: '#FFFFFF',
          },
          // Think in groups of 4 and color every two rows identical
          ['& > tbody:nth-of-type(even), ' +
          '& > tbody:only-of-type > tr:nth-of-type(4n), ' +
          '& > tbody:only-of-type > tr:nth-of-type(4n-1)']: {
            background: '#EEEEEE',
          },
          ['& > tbody:not(:only-of-type):hover, ' +
          '& > tbody:only-of-type > tr:hover,' +
          '& > tbody:only-of-type > tr:hover + tr']: {
            background: '#DDDDDD',
          },
          // FIXME hovering groups don't fit when mouse over even rows
          ['& > tbody:only-of-type > tr:nth-of-type(even):hover,' +
          // the following does not work of course, but it should show
          // what is intended. "- tr" can't work, as html works from top to
          // bottom only
          '& > tbody:only-of-type > tr:nth-of-type(even):hover - tr']: {
            background: '#DDDDDD',
          },
        },
      };
    }
  }
);

So, the comments should clarify my problem a bit more. How do I select, say, the second row which I hover together with the first row, i.e. the PREVIOUS one? Putting a tbody around every two rows and selecting that is not an option.

EDIT: Here is the html structure of one of the rows in JSX. Note that the DOMs are styled differently and got their own component, but their function is identical to tr and td:

  <TableRow>
    <TableData rowSpan="2">
      {'Title of Row'}
    </TableData>
    <TableData>
      {data1}
    </TableData>
    <TableData>
      {data2}
    </TableData>
    <TableData>
      {data3}
    </TableData>
    <TableData>
      {data4}
    </TableData>
  </TableRow>
  <TableRow>
    <TableData colSpan="4">
      {veryLongText}
    </TableData>
  </TableRow>

Maybe adding an more simple example of what you want (with a snippet) can help to understand the problem. Basically, you want an zebra pattern on your table? — Maxwell s.c, Nov 29 '17 at 12:59
Can we see your html structure? One example of one of these cells that span two rows would be helpful. — arbuthnott, Nov 29 '17 at 13:15
Please read the "*[mcve]*" and "[how do I create a 'runnable snippet'?](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do)" articles. — David Thomas, Nov 30 '17 at 16:19

score 1 · Answer 1 · answered Nov 29 '17 at 13:27

1

This might be what you're after..

Javascript

var row = table.rows[1];
var prevRow = row.previousElementSibling;

jQuery

var row = $('.myTableClass tr').eq(1);
var prevRow = row.prev();

answered Nov 29 '17 at 13:27

DNKROZ

2,634
4
25
43

This is kind of, what I'm after. Is there a way in CSS to select the previousElementSibling? – Crotaphytus Nov 30 '17 at 16:07
Mmh not really... You could technically do it (if you're using flexbox) but it would turn out to be an hack impossible to understand for an external viewer. If you want to make your life easier, you'll need support from JavaScript – Fabio Lolli Nov 30 '17 at 16:37
This is the most complete analysis on how to do it with CSS that I've seen: https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector – Fabio Lolli Nov 30 '17 at 16:42
Javascript is totally an option! Is there an easy way to do this with JS? – Crotaphytus Dec 04 '17 at 08:32
@Crotaphytus yes the one I posted in this answer! haha – DNKROZ Dec 04 '17 at 11:01

How can I select a table row together with its previous one?

1 Answers1