zoukankan      html  css  js  c++  java
  • React 表格行点击事件

            <Table
              dataSource={this.dataSources}
              columns={this.columns}
              onRow={(record) => {//表格行点击事件
                return {
                  // onClick: this.clickRow.bind(this,record),
                  onMouseEnter: this.clickRows.bind(this,record),
                  onMouseLeave: this.clickRowss.bind(this,record)
                };
              }}
              onHeaderRow={(column, index) => {//表格行点击事件
                return {
                  // onClick: this.clickRow.bind(this,record),
                  onMouseEnter: this.clickRowsss.bind(this,column, index),
                  onMouseLeave: this.clickRowssss.bind(this,column, index)
    
                };
              }}
              // bordered
              pagination={{
                // current: 1,
                current: this.state.pages, //当前页数     改变这个 就在改变页
                defaultCurrent: 1, //默认的当前页数
                pageSize: 20,
                // defaultPageSize: 1,
                onChange: this.onchange.bind(this),
                hideOnSinglePage: true
              }}
              // style = { display = this.state.cloudSource }
              className="cloudSourceAudit tablessa"
            />
      // ---------------------------------------------------------------------
      clickRows(record){
        document.getElementsByClassName('ant-table-row-level-0')[record['key']-1].style.background = '#516563';
        // document.getElementsByClassName('ant-table-thead')[0].style.background = '#516563';
      }
      clickRowss(record){
        document.getElementsByClassName('ant-table-row-level-0')[record['key']-1].style.background = 'transparent';
        // document.getElementsByClassName('ant-table-thead')[0].style.background = 'transparent';
      }
      clickRowsss(record,index){            //头部
        document.getElementsByClassName('ant-table-thead')[0].style.background = '#516563';
        document.getElementsByClassName('ant-table-thead')[1].style.background = '#516563';
    
      }
      clickRowssss(record,index){
        document.getElementsByClassName('ant-table-thead')[0].style.background = 'transparent';
        document.getElementsByClassName('ant-table-thead')[1].style.background = 'transparent';
      }

      clickRowsssss(record,index){
        // console.log("我是5",record,index,$('#tableId'))
        // document.getElementsByClassName('ant-table-row-level-0')[0].style.background = 'red';
        // document.getElementsByClassName('ant-table-row-level-0')[1].style.background = 'red';
        
        for(var i=0; i<document.getElementsByClassName('ant-table-row-level-0').length; i++){
          document.getElementsByClassName('ant-table-row-level-0')[i].style.background = 'transparent';
        }
        
        document.getElementsByClassName('ant-table-row-level-0')[record['key']-1].style.background = '#516563';
    
        // console.log(document.getElementsByClassName('ant-table-row-level-0'),"测试",$('.ant-table-row-level-0')[record['key']-1])
        // this.setState({
        //   rowId: record.key,
        // });
        // $('.ant-table-row-level-0')[record['key']-1].siblings().style.background = 'red';
      }
    
    
    

      

  • 相关阅读:
    操作系统典型调度算法
    C++ volatile 关键字
    vue class绑定 组件
    yarn 基本用法
    vscode 插件安装以及首选项配置
    git 多人协作
    git Feature分支
    git Bug分支
    git 分支策略
    git 解决冲突
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12988475.html
Copyright © 2011-2022 走看看