table点击改变获取行颜色

可以通过JavaScript来实现点击表格行改变颜色的效果。你可以使用以下代码实现：

// 获取所有表格行
var rows = document.getElementsByTagName("tr");

// 遍历每一行
for (var i = 0; i < rows.length; i++) {
  var row = rows[i];

  // 添加点击事件
  row.onclick = function() {
    // 如果当前行未选中，则设置为选中状态
    if (this.style.backgroundColor !== "yellow") {
      this.style.backgroundColor = "yellow";
    } else { // 如果当前行已选中，则取消选中状态
      this.style.backgroundColor = "";
    }
  };
}

这段代码首先获取所有表格行，并为每一行添加点击事件。当行被点击时，如果当前行未选中，则设置为选中状态（背景颜色为黄色），否则取消选中状态（背景颜色为空）。你可以根据需要自定义选中状态的颜色。

相关问题

QTableView改变某一行颜色c++实现

### 回答1：
您可以通过 QStyledItemDelegate 类来实现 QTableView 某一行的颜色改变。以下是一个简单的示例代码：

class MyDelegate : public QStyledItemDelegate
{
public:
    MyDelegate(QObject *parent = nullptr) : QStyledItemDelegate(parent) {}

    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override
    {
        // 获取表格中该行的索引
        int row = index.row();
        
        // 获取表格中该行某一列的值
        QVariant value = index.model()->data(index.model()->index(row, 0));
        
        // 判断该行某一列的值是否满足特定条件，如果满足则改变该行的背景色
        if (value.toString() == "需要改变颜色的值") {
            painter->fillRect(option.rect, QColor(Qt::yellow).lighter(160));
        } else {
            QStyledItemDelegate::paint(painter, option, index);
        }
    }
};

然后，将该委托类对象设置为 QTableView 的委托即可：

MyDelegate *delegate = new MyDelegate(this);
ui->tableView->setItemDelegate(delegate);

当表格中某一行的某一列的值为特定值时，该行的背景色将会被更改为黄色。您可以根据实际需求更改颜色和判断条件。

### 回答2：
要改变QTableView中某一行的颜色，可以通过自定义QItemDelegate来实现。

首先，我们需要创建一个继承自QItemDelegate的子类，重写paint()函数。在paint()函数中，我们可以通过QStyleOptionViewItem参数来获取当前单元格的信息，包括所在的行和列。然后，我们可以根据行号来判断是否要改变该行的颜色，如果需要改变颜色，就使用QStylePainter类来绘制背景色。最后，调用父类的paint()函数来绘制其他内容。

接下来，在主程序中创建一个QTableView对象，并设置自定义的QItemDelegate作为它的itemDelegate。然后，通过调用setModel()函数设置数据模型，并通过调用setItemDelegateForRow()函数为需要改变颜色的行设置QItemDelegate。

最后，在自定义的QItemDelegate类中添加setRowColor()函数，用于设置需要改变颜色的行的行号，并在paint()函数中根据该行号来判断是否绘制背景色。

以下是实现该功能的代码示例：

#include <QApplication>
#include <QTableView>
#include <QStandardItemModel>
#include <QItemDelegate>
#include <QPainter>

class RowColorDelegate : public QItemDelegate
{
public:
    explicit RowColorDelegate(QObject *parent = nullptr) : QItemDelegate(parent), m_rowColor(-1) {}

    void setRowColor(int row)
    {
        m_rowColor = row;
    }

    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override
    {
        if (index.row() == m_rowColor)
        {
            QStyleOptionViewItem opt(option);
            opt.backgroundBrush = QBrush(Qt::red); // 设置背景色为红色
            QStylePainter stylePainter(painter);
            stylePainter.drawControl(QStyle::CE_ItemViewItem, opt); // 绘制背景色
        }

        QItemDelegate::paint(painter, option, index); // 绘制其他内容
    }

private:
    int m_rowColor;
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTableView tableView;
    QStandardItemModel model(5, 3); // 创建一个5行3列的数据模型
    tableView.setModel(&model);

    RowColorDelegate delegate;
    tableView.setItemDelegate(&delegate);

    delegate.setRowColor(2); // 设置第2行为红色

    tableView.show();

    return a.exec();
}

在上述示例中，我们创建一个5行3列的QStandardItemModel作为数据模型，并将其设置给QTableView。然后，我们使用自定义的RowColorDelegate类作为tableView的itemDelegate，并通过调用setRowColor()函数将第2行设置为红色。

运行程序后，我们可以看到QTableView中第2行的背景色变为了红色。这样，我们就成功地实现了使用QTableView改变某一行的颜色的功能。

### 回答3：
要改变QTableView中某一行的颜色，需要以下几个步骤实现：

1. 首先，我们需要自定义一个QStyledItemDelegate类，并重写它的paint方法。在paint方法中判断当前正在绘制的单元格所在的行是否是目标行，如果是则改变绘制颜色，否则继续使用默认颜色绘制。

2. 然后，我们需要为QTableView设置一个自定义的数据模型，并在该模型中添加一个方法用于设置目标行的行号。在该方法中，将传入的行号保存起来。

3. 在QTableView中的行绘制事件中，通过模型调用设置目标行行号的方法，并通过QStyledItemDelegate类为QTableView的每个单元格插入自定义的绘制逻辑。

以下是示例代码：

import sys
from PyQt5.QtWidgets import QApplication, QTableView
from PyQt5.QtGui import QStandardItemModel, QStandardItem, QStyledItemDelegate
from PyQt5.QtCore import Qt, QStyleOptionViewItem

class MyDelegate(QStyledItemDelegate):
    def __init__(self, parent=None):
        super().__init__(parent)

    def paint(self, painter, option, index):
        # 判断当前绘制的单元格所在行是否是目标行
        if index.row() == self.parent().target_row:
            option.palette.setColor(QPalette.Highlight, QColor(Qt.red))  # 改变目标行的颜色为红色

        super().paint(painter, option, index)  # 继续使用默认的绘制逻辑

class MyModel(QStandardItemModel):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.target_row = -1  # 目标行的行号，默认为-1表示没有目标行

    def set_target_row(self, row):
        self.target_row = row

class MyTableView(QTableView):
    def __init__(self, parent=None):
        super().__init__(parent)

    def drawRow(self, painter, options, index):
        self.openPersistentEditor(index)  # 打开永久编辑器，以便能够绘制自定义的单元格

        super().drawRow(painter, options, index)

if __name__ == "__main__":
    app = QApplication(sys.argv)

    table = MyTableView()

    # 创建数据模型
    model = MyModel()
    table.setModel(model)

    # 添加数据
    model.appendRow([QStandardItem("列1"), QStandardItem("列2"), QStandardItem("列3")])

    # 设置目标行
    model.set_target_row(0)  # 第一行改变颜色

    # 设置绘制代理
    delegate = MyDelegate(table)
    table.setItemDelegate(delegate)

    table.show()

    sys.exit(app.exec_())

上述代码中，我们自定义了一个QStyledItemDelegate类，并重写了它的paint方法。在这个方法中，我们通过判断正在绘制的单元格所在的行是否是目标行来决定是否改变绘制颜色。

然后，我们自定义了一个数据模型类MyModel，在该类中添加了set_target_row方法，用于设置目标行。在这个方法中，我们将传入的行号保存起来。

最后，在QTableView的行绘制事件中，我们调用模型的set_target_row方法设置目标行，并通过QStyledItemDelegate类为每个单元格插入了自定义的绘制逻辑。

请问el-table，我想点击不同的表头可以让表头改变颜色，并且可以获取这列数据，

对于这个问题，您可以使用 Element UI 提供的 `header-click` 事件来实现点击表头改变颜色的功能，同时通过获取当前列的 `prop` 属性来获取这列数据。具体实现步骤如下：

1. 给 `el-table-column` 组件添加 `prop` 属性来标识当前列的数据属性，例如：

<el-table-column prop="name" label="姓名"></el-table-column>

2. 在 `el-table` 组件上添加 `header-click` 事件来监听表头点击事件，例如：

<el-table @header-click="handleHeaderClick" :data="tableData">
  <!-- el-table-column 组件省略 -->
</el-table>

3. 在 `handleHeaderClick` 方法中获取当前点击的列的 `prop` 属性，并根据需要改变表头的颜色，例如：

methods: {
  handleHeaderClick(column) {
    // 获取当前列的 prop 属性
    const prop = column.property;
    console.log(`Clicked column prop: ${prop}`);

    // 改变表头的颜色
    column.labelStyle = { color: 'red' };
  }
}

4. 如果需要获取当前列的数据，可以在 `handleHeaderClick` 方法中通过 `this.tableData` 来获取整个表格的数据，然后根据当前列的 `prop` 属性来找到相应的数据项，例如：

methods: {
  handleHeaderClick(column) {
    // 获取当前列的 prop 属性
    const prop = column.property;
    console.log(`Clicked column prop: ${prop}`);

    // 改变表头的颜色
    column.labelStyle = { color: 'red' };

    // 获取当前列的数据
    const data = this.tableData.map(item => item[prop]);
    console.log(`Column data: ${data}`);
  }
}

以上是实现您所需功能的大致思路，您可以根据具体的需求来进行调整。希望能对您有所帮助！