• 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';
      }
    
    
    

      

  • 相关阅读:
    二维数组的循环遍历
    es6 学习笔记
    变量、作用域与内存的一些总结
    MapReduce历史服务器
    NameNode和SecondaryNameNode
    MapReduce入门
    ZooKeeper实现HA HDFS
    hdfs临时文件更改
    linux中没有tree命令,command not found,解决办法
    Hadoop伪集群搭建环境
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12988475.html
Copyright © 2020-2023  润新知