时间戳

首页 > 解决方案 > 在 javascript 创建的表中加载 Bootstrap 样式的问题

javascript - 在 javascript 创建的表中加载 Bootstrap 样式的问题

问题描述

我正在创建一个从 API 中提取问题的琐事游戏。我想用引导程序来设计游戏。该游戏是用 Javascript 中的 Jquery 创建的 HTML 表格。该表在调用函数后附加到页面上，但它看起来不像引导程序设计。似乎引导程序没有正确加载？

我尝试在 HTML 页面底部包含 CDN Bootstrap 链接，但没有成功。我还尝试将 Javascript 中的 HTML 复制粘贴到 HTML 页面上，但样式仍然不正确。我对如何解决这个问题没有任何想法。任何帮助表示赞赏！

我想要的表格样式是引导网页上的深色边框：https ://getbootstrap.com/docs/4.3/content/tables/#bordered-table

let categories = [];
let catsAndClues = [];

// create Jeopardy Title and Start/Reset button
$("body").append(`
    <h1 id="title">JEOPARDY!</h1>
    <div id="button-div">
        <button id="button" data-startBtn="true">Start!</button>
    </div>
    <div id="game-board">
    </div>`)

async function getCategoryIds() {
    // save random number from one to 18000 to randomInt
    // randomInt will be used as the "offset" parameter to get a random sequence of categories
    let randomInt = Math.floor((Math.random() * 18000) + 1);
    let res = await axios.get(`http://jservice.io/api/categories?count=100&offset=${randomInt}`);
    // create a loop to iterate until the categories array contains 6 items
    for (let i=0;categories.length<6;i++){
        // pull random ID number from the 100 categories pulled from API
        let i= Math.floor((Math.random() * 100) + 1);
        let randomCatId= res.data[i].id;
        // if categories array does not include the randomCatId, add it to the categories array
        if (!categories.includes(randomCatId)){
            categories.push(randomCatId);
        }
        console.log(categories);
    }
}

async function getCategory(catId) {
    // retreive clues from API with the category ID parameter
    let res = await axios.get(`http://jservice.io/api/clues?category=${catId}`);
    // use .map function to return object displaying question, answer, and "showing"
    // properties for every item in the data's array
    let clueGroup = res.data.map(clue => {
        return {
          question: clue.question,
          answer: clue.answer,
          showing: null,
        };
    })
    console.log("clueGroup:", clueGroup);
    let clueArray = [];
    for (let i=0;clueArray.length<5;i++){
        // pull random clue from the clues array and save to variable
        let i= Math.floor((Math.random() * clueGroup.length));
        let randomClue= clueGroup[i];
        // if categories array does not include the randomCatId, add it to the categories array
        if (!clueArray.includes(randomClue)){
            clueArray.push(randomClue);
        }
    };
    // define obj to show category title and list of all clues within the category
    console.log("clueArray: ", clueArray);
    console.log(res.data[0].category.title);
    return {title: res.data[0].category.title, clues: clueArray};
}


function fillTable() {
    $("#game-board").append(
        `<table>
        <thead>
            <tr id="header-row" class="table table-dark">
                <th scope="col">${catsAndClues[0].title}</th>
                <th scope="col">${catsAndClues[1].title}</th>
                <th scope="col">${catsAndClues[2].title}</th>
                <th scope="col">${catsAndClues[3].title}</th>
                <th scope="col">${catsAndClues[4].title}</th>
                <th scope="col">${catsAndClues[5].title}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th id="${catsAndClues[0].clues[0].question}">?</th>
                <th id="${catsAndClues[1].clues[0].question}">?</th>
                <th id="${catsAndClues[2].clues[0].question}">?</th>
                <th id="${catsAndClues[3].clues[0].question}">?</th>
                <th id="${catsAndClues[4].clues[0].question}">?</th>
                <th id="${catsAndClues[5].clues[0].question}">?</th>
            </tr>
            <tr>
                <th id="${catsAndClues[0].clues[1].question}">?</th>
                <th id="${catsAndClues[1].clues[1].question}">?</th>
                <th id="${catsAndClues[2].clues[1].question}">?</th>
                <th id="${catsAndClues[3].clues[1].question}">?</th>
                <th id="${catsAndClues[4].clues[1].question}">?</th>
                <th id="${catsAndClues[5].clues[1].question}">?</th>
            </tr>
            <tr>
                <th id="${catsAndClues[0].clues[2].question}">?</th>
                <th id="${catsAndClues[1].clues[2].question}">?</th>
                <th id="${catsAndClues[2].clues[2].question}">?</th>
                <th id="${catsAndClues[3].clues[2].question}">?</th>
                <th id="${catsAndClues[4].clues[2].question}">?</th>
                <th id="${catsAndClues[5].clues[2].question}">?</th>
            </tr>
            <tr>
                <th id="${catsAndClues[0].clues[3].question}">?</th>
                <th id="${catsAndClues[1].clues[3].question}">?</th>
                <th id="${catsAndClues[2].clues[3].question}">?</th>
                <th id="${catsAndClues[3].clues[3].question}">?</th>
                <th id="${catsAndClues[4].clues[3].question}">?</th>
                <th id="${catsAndClues[5].clues[3].question}">?</th>
            </tr>
            <tr>
                <th id="${catsAndClues[0].clues[4].question}">?</th>
                <th id="${catsAndClues[1].clues[4].question}">?</th>
                <th id="${catsAndClues[2].clues[4].question}">?</th>
                <th id="${catsAndClues[3].clues[4].question}">?</th>
                <th id="${catsAndClues[4].clues[4].question}">?</th>
                <th id="${catsAndClues[5].clues[4].question}">?</th>
            </tr>
            </tbody>
        </table>`);

}


async function setupAndStart() {
    await getCategoryIds();
    console.log(catsAndClues);
    for (let i=0;catsAndClues.length<6;i++){
        let tempVar = await getCategory(categories[i]);
        catsAndClues[i] = tempVar;
    }
    console.log(catsAndClues);
    fillTable();

}
setupAndStart()
/* some colors you may find useful:
  #115ff4
  #060ce9
  #28a200
  #8d2ab5
  #74119c
*/

body {
  background-color:  #115ff4;
  font-family: Helvetica;
}

#title {
  text-align: center;
  color: #f2dc56;
  text-shadow: 4px 4px black;
  font-size: 3em;
}

#button-div{
  text-align: center;
}

#button{
  padding: 5px 20px 5px 20px;
  font-family: Helvetica;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Copse&display=swap"
        rel="stylesheet">
  <link rel="stylesheet" href="jeopardy.css">
</head>
<body>

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/lodash"></script>
<script src="jeopardy.js"></script>

</body>
</html>

标签： javascripthtmlbootstrap-4

解决方案

将类添加到表格标签“table table-bordered table-dark”

推荐阅读