如何更改一行的背景颜色

Question

我有这个代码我需要这样做如果 {row.BB} <= 100 则将具有此数字的行背景显示为红色我怎样才能做到这一点此代码连接到数据库并使用 JSX 文件

    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>
        </>
    );
}

Answer 1

我假设 'bg' 用于提供行的背景颜色，它也用于代码中的框背景颜色。

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

Answer 2

我不太清楚你的问题，但考虑到你想更改这一行 <Td>{row.BB}</Td> 那么，你可以通过两种方式做到这一点

使用 If else 块

` {file.map((行, 索引) => (

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>)
 }

))}} `

如果这些方法有效，请告诉我

Answer 3

您可以通过多种方式解决此问题，但我认为最简单的方法是保持简单（因为您已经在使用老式 <table>s 和 <td>无论如何).

你可以尝试这样的事情：

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

让我知道这是否适合你。

如何更改一行的背景颜色

How to change a background color for a row

html

javascript

css

frontend

node.js