table支持选中行功能

本文介绍了如何在HTML表格中实现行选中功能。通过在每个`<tr>`标签上添加`onmouseover`、`onmouseout`和`onclick`事件,并结合JavaScript函数,实现了鼠标悬停和点击时行背景色的变化。默认颜色设为白色。

1:在每一个tr添加如下js事件

<tr onmouseover="over_color(this)" onmouseout="remove_color(this)" onclick="click_color(this)">

</tr>

2:添加js

var defaultColor="#ffffff";

        var overColor="#f60";
        var clickColor="rgb(248, 190, 143)";
        var bgFlag = "<%=cssPathName%>";
        if ("unicom"  == bgFlag)
        {
            overColor="#f60";
            clickColor="rgb(248, 190, 143)";
        }
        else if ("telecom"  == bgFlag)
        {
            overColor="#98d000";
            clickColor="rgb(219, 248, 143)";
        }
        else if ("mobile"  == bgFlag)
        {
            overColor="#0085d0";
            clickColor="rgb(191, 227, 252)";
        }
        else
        {
            overColor="#f60";
            clickColor="rgb(248, 190, 143)";
        }
        var chooseRow=9999;
        function over_color(obj){
            if(obj.style.backgroundColor!=clickColor)
                obj.style.backgroundColor=overColor;
        }
        function remove_color(obj){
            if(obj.style.backgroundColor!=clickColor)
                obj.style.backgroundColor=defaultColor;
        }
        function click_color(obj){
            var tb=obj.parentNode;//获得父节点对象
            if(chooseRow!=9999){
                var lastObj=tb.rows[chooseRow];
                lastObj.style.backgroundColor=defaultColor;
            }
            chooseRow=obj.rowIndex;//获得当前行在表格中的序数
            obj.style.backgroundColor=clickColor;        

        }




### QT TableWidget 设置单击选中的方法 在 QT 中,`QTableWidget` 是一种常用的表格控件,其提供了丰富的接口来控制用户交互为。为了实现单击某一时自动选中该整的效果,主要依赖于 `setSelectionBehavior()` 和其他相关设置。 #### 设置选择为 通过调用 `setSelectionBehavior(QAbstractItemView::SelectRows)` 方法,可以指定当用户点击表格中的某个位置时,默认的操作是以为单位进选择。这是实现单击选中的核心步骤之一。 ```cpp ui->tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows); ``` 此代码片段的作用是定义用户的交互方式为按照来进选择[^1]。 #### 配置选择模式 除了选择为之外,还需要配置选择模式以决定如何处理多个项目的选择逻辑。如果希望支持的同时选择(例如按下 Ctrl 键),则可以选择扩展选择模式;而如果只允许单选中,则应该使用单一选择模式。 ```cpp // 多选择模式(可通过 Ctrl 或 Shift 实现多选) ui->tableWidget->setSelectionMode(QAbstractItemView::ExtendedSelection); // 单一选择模式(仅允许选中) ui->tableWidget->setSelectionMode(QAbstractItemView::SingleSelection); ``` 这两种模式可以根据具体的业务需求自由切换[^2]。 #### 进一步优化体验 为了让用户体验更佳,在设置了基本的为之后还可以进一步调整一些细节参数,比如启用奇偶的颜色交替显示、自定义表头样式等。 - **奇偶颜色交替** 此功能可以让表格看起来更为清晰美观,减少长时间阅读带来的疲劳感。 ```cpp ui->tableWidget->setAlternatingRowColors(true); ``` - **表头样式的个性化** 自定义表头的背景色和其他装饰效果可以使界面更具吸引力。 ```cpp ui->tableWidget->horizontalHeader()->setStyleSheet( "QHeaderView::section{background-color: #BEBEBE; border:1px solid black;}" ); ``` - **禁用表头高亮塌陷** 如果不希望鼠标悬停或点击后表头出现不必要的视觉变化,可以通过如下命令关闭这一特性。 ```cpp ui->tableWidget->horizontalHeader()->setHighlightSections(false); ``` 以上所有设置结合起来不仅可以达到单击选中的目的,还能显著改善整体 UI/UX 设计质量[^3]。 --- ### 完整示例代码 以下是一个完整的实例程序,展示了如何创建一个具有单击选中特性的 `QTableWidget` 控件: ```cpp #include <QtWidgets> class MainWindow : public QMainWindow { public: explicit MainWindow(QWidget *parent = nullptr) : QMainWindow(parent), tableWidget(new QTableWidget(this)) { setupUi(); } private slots: void setupUi() { setCentralWidget(tableWidget); // 初始化表格结构 tableWidget->setColumnCount(3); QStringList headers; headers << "ID" << "Name" << "Value"; tableWidget->setHorizontalHeaderLabels(headers); tableWidget->setRowCount(5); for (int i = 0; i < 5; ++i) { QTableWidgetItem *item1 = new QTableWidgetItem(QString::number(i)); QTableWidgetItem *item2 = new QTableWidgetItem(QString("Item %1").arg(i)); QTableWidgetItem *item3 = new QTableWidgetItem(QString("%1").arg(qrand() % 100)); tableWidget->setItem(i, 0, item1); tableWidget->setItem(i, 1, item2); tableWidget->setItem(i, 2, item3); } // 设置选择为和模式 tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows); tableWidget->setSelectionMode(QAbstractItemView::SingleSelection); // 增强视觉效果 tableWidget->setAlternatingRowColors(true); tableWidget->horizontalHeader()->setStyleSheet( "QHeaderView::section{background-color: #BEBEBE; border:1px solid black;}"); tableWidget->horizontalHeader()->setHighlightSections(false); } private: QTableWidget *tableWidget; }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MainWindow w; w.resize(640, 480); w.show(); return app.exec(); } #include "main.moc" ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值