React 表格行点击事件

Posted 2020-12-23 zhanglanzuopin

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