在兩個表中并排復制相同的tr行css-有解無憂

我在 div 中保留了兩個表 table1 是固定的，不可滾動，table2 是可滾動的。所以它們看起來只有一張桌子。現在我想當我在第一個表中選擇行時，表的選定行都設定背景顏色。我的意思是，如果在表一中選擇了第一行，并且背景顏色變為綠色，那么第二個表的第一行也應將背景顏色設定為綠色

在兩個表中并排復制相同的 tr 行 css

圖中，Sr No 和 Asin 是一張表，status video 是第二張表。

uj5u.com熱心網友回復：

您可以做的是更改第一個表中單元格的單擊狀態，在表 1 中找到其包含的行索引，然后在該行和具有相同索引的行中切換高亮類（如果有）在第二個表中。

這是一個簡單的 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>

uj5u.com熱心網友回復：

在沒有任何代碼示例的情況下，很難確切地說出您應該做什么，但聽起來像是useState會處理的一件簡單的事情。

import { useState } from 'react';

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

然后根據狀態處理表格的背景顏色。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319118.html

標籤：html css 反应反应表

上一篇：在美麗的湯網路抓取中一無所獲

下一篇：外部Javascript檔案在HTML中不起作用