在两个表中并排复制相同的 tr 行 css

Question

我在 div 中保留了两个 table table1 是固定的且不可滚动，而 table2 是可滚动的。所以它们看起来像一个 table。现在，当我 select 中的第一个 table 行时，table 的 select 行都设置了背景颜色。我的意思是，如果第一行在 table 中被 select 编辑并且背景颜色变为绿色，那么第二行 table 的第一行也应该将背景颜色设置为绿色

图中，Sr No和Asin是一个table，status+video是第二个table。

Answer 1

如果没有任何代码示例，很难确切地说出您应该做什么，但听起来很简单 useState 会处理。

import { useState } from 'react';

const [selected, setSelected] = useState(false);

然后根据状态处理table的backgroundColor。

Answer 2

你可以做的是改变第一个单元格的点击状态 table 在 table 中找到它包含的行索引 1 然后切换突出显示 class 两者在该行和第二行中具有相同索引（如果有）的行中 table.

这是一个简单的 JS 片段来说明这个想法：

const tables = document.querySelectorAll('table');
const rows1 = tables[0].querySelectorAll('tr');
const rows2 = tables[1].querySelectorAll('tr');

function clicked(el1) {
  const row = el1.parentElement.parentElement;
  let clickedIndex;
  for (clickedIndex = 0; clickedIndex < rows1.length; clickedIndex++) {
    if (rows1[clickedIndex] == row) break;
  }
  rows1[clickedIndex].classList.toggle('highlight');
  if (clickedIndex < rows2.length) rows2[clickedIndex].classList.toggle('highlight');
}

table {
  display: inline-block;
}

table:nth-child(2) {
  height: 6em;
  overflow-y: scroll;
}

.highlight {
  background: green;
}

<body>
  <table>
    <tr>
      <td><input type="checkbox" onchange="clicked(this);"></td>
      <td>First row first table</td>
    </tr>
    <tr>
      <td><input type="checkbox" onchange="clicked(this);"></td>
      <td>Second row first table</td>
    </tr>
    <tr>
      <td><input type="checkbox" onchange="clicked(this);"></td>
      <td>Third row first table</td>
    </tr>
    <tr>
      <td><input type="checkbox" onchange="clicked(this);"></td>
      <td>Fourth row first table</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>
        <td>First row second table</td>
    </tr>
    <tr>
      <td>
        <td>Second row second table</td>
    </tr>
    <tr>
      <td>
        <td>Third row second table</td>
    </tr>
    <tr>
      <td>
        <td>Fourth row second table</td>
    </tr>
    <tr>
      <td>
        <td>Fifth row second table</td>
    </tr>
    <tr>
      <td>
        <td>Sixth row second table</td>
    </tr>
  </table>

在两个表中并排复制相同的 tr 行 css

Replicate same tr row css in two tables side by side

html

css

reactjs

react-table