Question

我有一个表，其中第一列延伸两行。以下列有两个单独的行。

该表需要包含许多这些“加倍行”。到目前为止，没问题。

样式应该是斑马纹，我用这个代码实现了（注意，CSS是反应/迷人的格式）：

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

所以，评论应该更清楚地澄清我的问题。我如何选择与第一行悬停在一起的第二行，即PREVIOUS？在每两行放置一个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();

如何选择表格行和之前的表格？

1 个答案: