动态更改 bootstrap table 特定行的颜色

Question

我在我的 React 项目中使用 bootstrap table。我有一个 table，它从这样的标签中获取数据：

<Table className='flags-table' responsive hover>
    <thead>
    <tr>
        <th></th>
        <th> Time In</th>
        <th> Time Out</th>
        <th> Type</th>
        <th> Category</th>
    </tr>
    </thead>
    <tbody>
    {
        this.props.tag_fetch_reducer.tags.map((x, i) => (
            <tr key={i} onClick={this.handleRowClick.bind(this, i)}>
                <td>
                    <div className='red-box'></div>
                </td>
                <td> {this.secondsToHms(x.time)} </td>
                <td> {this.secondsToHms(x.stopTime)} </td>
                <td> {x.tagname} </td>
                <td contentEditable="false"> {x.category}</td>
            </tr>
        ))
    }
    </tbody>
</Table>

我想要的：

我有一个名为 tagIndex 的变量，它会在一定时间间隔后更改其状态。所以 tagIndex 的值不断变化。该值可以从 0 到与 table 行的最后一个索引相同的值。现在我想要的是每当 tagIndex 达到某个值时，我想更改该索引行的颜色。

例如：tagIndex 为 5，那么我应该看到第 5 行的颜色为黄色，其他行的颜色为白色。然后，当 tagIndex 变为 8 时，我希望黄色移至第 8 行，而所有其他行均为白色。我该怎么做？

Answer 1

我无法准确判断 table 您使用的是什么（您的标记看起来与 react-bootstrap-table 有点不同）

但假设您使用的只是普通 bootstrap 和 table。你可以做这样的事情。我创建了一个计时器，我每秒更改状态中选择的行。然后我添加一个 class（您可以使用内联样式，具体取决于您的项目的结构），它将背景设置为红色到所选行的行。

https://jsfiddle.net/nacj5pt4/

var Hello = React.createClass({
  getInitialState: function() {
    return {
      selectedIndex: 0
    };
  },
  componentDidMount() {
    setInterval(() => this.setState({
      selectedIndex: (this.state.selectedIndex + 1) % this.props.data.length
    }), 1000)
  },
  render: function() {
    return (
      <table className='flags-table'>
        <thead>
        <tr>
            <th>Tagname</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody>
        {
            this.props.data.map((row, i) => (
                <tr className={this.state.selectedIndex === i ? 'selected' : ''} key={i}>
                    <td>
                      {row.tagName}
                    </td>
                    <td>
                      {row.value}
                    </td>
                </tr>
            ))
        }
        </tbody>
    </table>
   );
  }
});

const data = [
  {tagName: "category 1", value: 100},
  {tagName: "category 2", value: 100},
  {tagName: "category 3", value: 100},
  {tagName: "category 4", value: 100}
]


ReactDOM.render(
  <Hello data={data} />,
  document.getElementById('container')
);

.selected {
  background: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container" />

动态更改 bootstrap table 特定行的颜色

Change the color of specific row of bootstrap table dynamically

javascript

reactjs

bootstrap-table