如何使用bootstrap为表的行和标题着色

smdncfj3  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(2)|浏览(183)

我需要在同一个表格中显示3种不同字段的数据类型。为此,我希望有3个标题,每个标题都有不同的颜色。
我使用 Bootstrap 来做我的设计,我的代码是在Javascript与React。
我写了下面的代码来完成这个任务(我试图简化它,但是它通常是可重复的)

import * as React from "react";
import { useEffect, useState } from "react";
import { nanoid } from "nanoid";

//props object
type IPropsTable={
    currentDatas: (DataType1 | DataType2 | DataType3 | undefined;
}

const TableRequest: React.FC<IPropsTable> = ({ currentDatas }) => {

    const [existData1, setExistData1] = useState(false);
    const [existData2, setExistData2] = useState(false);
    const [existData3, setExistData3] = useState(false);

    useEffect(()=>{
        if (currentDatas) {
            currentDatas.map((currentData) => {
                if (currentData.type === "data1") {
                    setExistData1(true);
                } else if (currentData.type === "data2") {
                    setExistData2(true);
                } else if (currentData.type === "data3") {
                    setExistData3(true);
                }
            })
        }
    },[currentDatas])   

    function renderTableHeaderData1() {
        let header = ['someField1', 'someField2']

        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }

    function renderTableHeaderData2() {
        let header = ['someOtherField1', 'someOtherField2']

        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }

    function renderTableHeaderData3() {
        let header = ['someOtherOtherField1', 'someOtherOtherField2']

        return header.map((key, index) => {
           return <th key={index}  scope="col">{key.toUpperCase()}</th>
        })
    }

    function renderTableData() {
        if(currentDatas){
            return currentDatas.map((session) => {
                if (session.type === "data1") {
                    return (
                        <tr key={nanoid()} className="warning">
                            <td>{session.someField1}</td>
                            <td>{session.someField2}</td>
                        </tr>
                    )
                } else if (session.type === "data2") {
                    return (
                        <tr key={nanoid()} className="info">
                            <td>{session.someOtherField1}</td>
                            <td>{session.someOtherField2}</td>
                        </tr>
                    )
                } else if (session.type === "data3") {
                    return (
                        <tr key={nanoid()} className="success">
                            <td>{session.someOtherOtherField1}</td>
                            <td>{session.someOtherOtherField2}</td>
                        </tr>
                    )
                }
            })
        } else{return undefined}
    }  

    return (
        <>
            <div>
                <table className="table table-sm">
                    <caption>Result Search</caption>
                    <thead>
                        {existData1? 
                            <tr className="thead-warning">{renderTableHeaderData1()}</tr>
                            : <></>
                        }
                        {existData2? 
                            <tr className="thead-info">{renderTableHeaderData2()}</tr>
                            : <></>
                        }
                        {existData3? 
                            <tr className="thead-success">{renderTableHeaderData3()}</tr>
                            : <></>
                        }
                    </thead>
                    <tbody>
                        {renderTableData()}
                    </tbody>
                </table>
            </div>
        </>
    )
}

export default TableRequest;

正如您在上面的代码中所看到的,我为每个<tr>warning用于data1,info用于data2,success用于data3)分配了一个css类。但是当呈现组件时,没有颜色出现,表完全是白色的,无论是三个标题中的每一个,还是表中每一行包含的数据。

我试着用thead-warningthead-infothead-success类作为我的表头tr css类,它们似乎更合适。但是同样的结果,没有颜色显示。
有没有人看到我做错了什么,可以引导我在正确的方向,我真的不明白我的问题在哪里。

zujrkrfu

zujrkrfu1#

使用<tr class="success"><tr class="warning">(取决于您想要的颜色)。
示例:

<tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
bsxbgnwa

bsxbgnwa2#

我的问题是我用来给我的表着色的className的名称。通过使用bg-success而不是table-success,一切都正常工作。但是我不明白为什么table-success类不能像这个例子中那样工作:example with table-success

相关问题