如何更改行的背景颜色答案

【问题标题】：How to change a background color for a row如何更改行的背景颜色
【发布时间】：2021-12-30 10:26:12
【问题描述】：

我有这个代码我需要这样做如果 {row.BB}

    return (
        <>
            <Navigation />
            <Box bg={'white'} w="100%"
                 p={4}
                 m={4}
                 color="black"
                 rounded={'md'}
            >
                     <Table size='sm' variant='striped' colorScheme='gray'>
                         <Thead>
                             <Tr>
                                <Th>A</Th>
                                <Th>B</Th>
                                <Th>C</Th>
                             </Tr>
                         </Thead>
                         <Tbody>
                         {file.map((row, index) => (
                             <Tr key={index}> 
                                 <Td>{row.AA}</Td>
                                 <Td>{row.BB}</Td>
                                 <Td>{row.CC}</Td>
                             </Tr>
                         ))}
                         </Tbody>
                     </Table>
            </Box>
        </>
    );
}

【问题讨论】：

标签： javascript html css node.js frontend

【解决方案1】：

我假设 'bg' 用于给出行的背景颜色，这也用于代码中的 Box 背景颜色。

<Tr bg={ () => this.getColorOftheRow(row.BB) } key={index}> 
    <Td>{row.AA}</Td>
    <Td>{row.BB}</Td>
    <Td>{row.CC}</Td>
</Tr>

在组件中

function getColorOftheRow(value) {
            if (value <= 100)
                return 'red';
            else if (value >= 100)
                return 'green';
                // add as many conditions as you want
            else
                return 'white';
        }

【讨论】：

我只需要 BB 行而不是所有行如果 BB
Tr 代表行，Td 是列，你想改变列的颜色 {row.BB} 吗？
我有一行有红色背景，但我还有其他数字在这一列上有值
这是因为我有

非常感谢 Abdur 它现在的工作，我如何在此添加更多条件，但使用 OR 例如 bg={ (row.BB = 100 ? 'Green': 'white') }

【解决方案2】：

您的问题对我来说不是很清楚，但仍然考虑要更改此行 <Td>{row.BB}</Td> 那么，您可以通过两种方式做到这一点

使用 If else 块

` {file.map((row, index) => (

if (row.BB <= 100){
    return (
        <Tr key={index} style={{backgroundColor:'red'}}> 
            <Td>{row.AA}</Td>
            <Td>{row.BB}</Td>
            <Td>{row.CC}</Td>
        </Tr>
    )
else {
    return(
        <Tr key={index}> 
            <Td>{row.AA}</Td>
            <Td>{row.BB}</Td>
            <Td>{row.CC}</Td>
        </Tr>
    )}
}
))}

如果您知道三元运算符，那么您可以简单地使用 ` { file.map((行, 索引) => (

 { row.BB <= 100 ? 
 (<Tr key={index} style={{ backgroundColor: 'red' }}> 
     <Td>{row.AA}</Td>
     <Td>{row.BB}</Td>
     <Td>{row.CC}</Td>
 </Tr>)
 : 
 (<Tr key={index}> 
     <Td>{row.AA}</Td>
     <Td>{row.BB}</Td>
     <Td>{row.CC}</Td>
 </Tr>)
 }

))}} `

请告诉我这些方法是否有效

【讨论】：

非常感谢，如果我还有一个条件 BB >= 100 怎么添加它
如果在 =>(
如果给出错误，则添加大括号，如果您想要更多条件，则只需在 if 括号内添加这样的 if (row.BB || 行.BB >=100)。请注意，我已突出显示 || 因为您也可以使用 && ，这取决于您的情况。如果您仍然遇到问题，请查看this 文档
谢谢，是的，现在一切都运行良好，如果这是一个 int，我如何将 $ 添加到 int number ，如果 row.BB 返回例如 10，我如何将其显示为 10$

【解决方案3】：

你可能有很多方法可以解决这个问题，但我认为最简单的方法是保持简单（因为你已经在使用老派<table>s 和<td>s 反正 )。

你可以试试这样的：

<Tr>
  ...
  <Td bgcolor={row.BB <= 100 && 'red'}></Td>
</Tr>

让我知道这是否适合你。

【讨论】：

这里显示错误，不确定我们为什么会遗漏任何 Td>？
我的错！我只是打字很快，忘记了结束。你当然需要那个！我编辑了我的答案以添加结束标记。
如果我需要同样的东西，但如果 BB = 则绿色