动态更改引导表特定行的颜色答案

【问题标题】：Change the color of specific row of bootstrap table dynamically动态更改引导表特定行的颜色
【发布时间】：2017-02-15 19:20:24
【问题描述】：

我在我的反应项目中使用引导表。我有一个表，它从这样的标签中获取数据：

<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 到与表行的最后一个索引相同的值。现在我想要的是每当 tagIndex 达到某个值时，我想更改该索引行的颜色。

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

【问题讨论】：

只是对您的<Table></Table> 的评论：保持 html 标记名称和属性小写被认为是一种很好的做法，即使它们不区分大小写。

标签： javascript reactjs bootstrap-table

【解决方案1】：

我无法确切知道您使用的是什么表（您的标记看起来与 react-bootstrap-table 有点不同）

但假设您只是使用带有表格的普通引导程序。你可以做这样的事情。我创建了一个计时器，我在其中每秒更改在 state 中选择的行。然后我添加一个类（您可以根据项目的结构使用内联样式），它将背景设置为选定行的行的红色。

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" />

【讨论】：