[英]How to change a background color for a row
I have this code I need to do that if {row.BB} <= 100 then show the row background that has this number as red color how can I do this This code connected to a database and it with a JSX file我有这个代码我需要这样做如果{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>
</>
);
}
I assume 'bg' is used to give the background color of the row, which is also used for Box background color in your code.我假设“bg”用于给出行的背景颜色,它也用于代码中的框背景颜色。
<Tr bg={ (row.BB <= 100 ? 'red': 'white') } key={index}>
<Td>{row.AA}</Td>
<Td>{row.BB}</Td>
<Td>{row.CC}</Td>
</Tr>
There are numerous ways you could likely go about this, but I think the simplest way is to keep it simple ( since you are already using old school <table>
s and <td>
s anyway ).有很多方法你可能会 go 关于这个,但我认为最简单的方法是保持简单(因为你已经在使用老式的
<table>
s和<td>
s )。
You could do try something like this:你可以尝试这样的事情:
<Tr>
...
<Td bgcolor={row.BB <= 100 && 'red'}>
</Tr>
Let me know if that works for you.让我知道这是否适合你。
Your question is not quite clear to me but still considering you want to change this row <Td>{row.BB}</Td>
then, you can do that in two ways你的问题对我来说不是很清楚,但仍然考虑你想改变这一行
<Td>{row.BB}</Td>
那么,你可以通过两种方式做到这一点
` {file.map((row, index) => ( ` {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>
)}
}
))}
` `
If you are aware of ternary operator then you can simply use ` { file.map((row, index) => (如果您知道三元运算符,那么您可以简单地使用 ` { file.map((row, index) => (
{ 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>) }
))}} ` ))}} `
Please let me know if any of these methods works请让我知道这些方法是否有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.