javascript - 如何选择表格行 及其前一行？

Question

我有一个表格，其中第一列横跨两行。以下列有两个单独的行。

表格需要包含许多这样的“双行”。到目前为止，没问题。

样式应该是斑马纹，这是我用这段代码实现的(注意，CSS 是 react/glamorous 格式):

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',
          },
        },
      };
    }
  }
);

因此，评论应该更清楚地说明我的问题。例如，我如何选择与第一行一起悬停的第二行，即上一行？每两行放置一个 tbody 并选择它不是一个选项。

编辑:这是 JSX 中其中一行的 html 结构。请注意，DOM 的样式不同并且有自己的组件，但它们的功能与 tr 和 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>

Answer 1

这可能就是您想要的..

Javascript

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

jQuery

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