时间戳

首页 > 解决方案 > 删除表格元素中的白线

javascript - 删除表格元素中的白线

问题描述

我编写了一个 js 代码来制作表格以及 tds 和 trs，但是它们之间有这些奇怪的白线，我很确定这是 CSS 属性之一的问题，但我找不到我需要更改的东西. 我是一个初学者程序员。欢迎提供帮助，如果您对代码有改进，或者只是关于如何继续我的编程之旅的建议或其他内容，我将非常高兴:) 

const board = document.getElementById("board");
let black = true;

for(let i = 1; i <= 8; i++){

    let row = document.createElement("tr");
  
    if(black){
        row.classList.add("black");
    }
    else{
        row.classList.add("black");
    }
    black = !black;
  
    board.appendChild(row);

    for(let j = 1; j <= 8; j++){

        let column = document.createElement("td");
      

        if(black){
            row.classList.add("black");
        }
        else{
            row.classList.add("white");
        }
        black = !black;
    
        board.appendChild(column);

    }
}
.black {
    background: black;
}

.white { 
    background: white;
}

table { 
    height: 900px;
    width: 900px;
    border: 2px solid black;
    display: inline-block;
    margin: -1px;
    border-collapse: collapse;
}

td, tr {
    border: 2px solid black;
    height: 112.5px;
    width: 112.5px;
}

td::after {
    content: ' ';
    display: block;
    margin-top: 100%;
}

.sqr { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="chessContainer">
        <table id="board">

        </table>
    </div>
    <script src="chess.js"></script>
</body>
</html>

标签： javascripthtmlcssgame-development

解决方案

您的问题出在 javascript 中，您希望将列 (td) 附加到行 (tr)，然后将行附加到板上。

board.appendChild(row);这是你的问题。将其更改为row.appendChild(column);

注意：如果您在运行时右键单击浏览器并查看表格的构建方式，您将看到您正在创建一个tr并且行内没有任何内容，那么您有 8个td标签并且 html 以这种方式继续。这应该是要看的线索。

const board = document.getElementById("board");
let black = true;

for(let i = 1; i <= 8; i++){

    let row = document.createElement("tr");
   // let sqr = document.createElement("div");
    //sqr.classList.add("sqr");

    if(black){
        row.classList.add("black");
    }
    else{
        row.classList.add("black");
    }
    black = !black;
    //row.appendChild(sqr);
    board.appendChild(row);


    for(let j = 1; j <= 8; j++){

        let column = document.createElement("td");
        //let sqr2 = document.createElement("div");
        //sqr2.classList.add("sqr");


        if(black){
            row.classList.add("black");
        }
        else{
            row.classList.add("white");
        }
        black = !black;
       // column.appendChild(sqr2);
        row.appendChild(column);

    }
}
.black {
    background: black;
}

.white { 
    background: white;
}

table { 
    height: 900px;
    width: 900px;
    border: 2px solid black;
    display: inline-block;
    margin: -1px;
    border-collapse: collapse;
}

td, tr {
    border: 2px solid black;
    height: 112.5px;
    width: 112.5px;
}

td::after {
    content: ' ';
    display: block;
    margin-top: 100%;
}

.sqr { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="chessContainer">
        <table id="board">

        </table>
    </div>
    <script src="chess.js"></script>
</body>
</html>

推荐阅读