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

      

  • 相关阅读:
    24丨基础篇:Linux磁盘I-O是怎么工作的(上)
    23 | 基础篇:Linux 文件系统是怎么工作的?
    45 | 答疑(五):网络收发过程中,缓冲区位置在哪里?
    selenium相关:通过location 和 size 获取元素所在像素位置和尺寸,截取图片ROI
    python排序算法之冒泡,选择,插入
    pyspider和pyquery总结
    python之基于libsvm识别数字验证码
    selenium执行JavaScript语句:控制滚动条 聚焦元素 改变下拉选项
    python导入import
    【转】利用 selenium 的 webdrive 驱动 headless chrome
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12988475.html
Copyright © 2011-2022 走看看