如何在javascript中将按钮转到下一行_Javascript_Jquery

如何在javascript中将按钮转到下一行

javascript jquery

如何在javascript中将按钮转到下一行,javascript,jquery,Javascript,Jquery,我正在做一个井字游戏，在那里我需要创建按钮，然后添加事件到它。一行有三个按钮，下一行有三个按钮，下一行有另外三个按钮。我使用了break标记和\r\n符号，但它仍然不起作用。请帮忙 <body> <div id="displaytable"></div> <script src='jquery-3.3.1.js'></script> <script> var table= [];

我正在做一个井字游戏，在那里我需要创建按钮，然后添加事件到它。一行有三个按钮，下一行有三个按钮，下一行有另外三个按钮。我使用了break标记和\r\n符号，但它仍然不起作用。请帮忙

 <body>
    <div id="displaytable"></div>
    <script src='jquery-3.3.1.js'></script>
     <script>
      var table= [];
       var blocks = 9;
       var player,boardId;
      winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];


    $(document).ready(function(){

        buttonId = 0;

        for (var index = 0; index < blocks; index++) {
            button1 = document.createElement("button");

            if((index==2||index==5||index==8)&&(buttonId==3||buttonId==6||buttonId==9)){
                button1.innerHTML="\r\n"+"<br>";
            }

            button1.innerHTML = " + " ;
            button1.id = buttonId;
            button1.setAttribute("value", buttonId);
            button1.setAttribute("text", buttonId);

            button1.style.fontFamily = "Times New Roman";
            button1.style.backgroundSize = "50px";
            button1.style.backgroundColor = "#C0C0C0";
            button1.style.fontSize = "25px";
            button1.style.marginBottom = "10px";
            button1.style.marginLeft = "5px";   
            button1.style.marginRight = "5px";
            document.body.appendChild(button1);
            buttonId++;



    }
});

  </script>

</body>


var表=[]；
var块=9；
var-player，boardId；
获胜组合=[[0,1,2]、[3,4,5]、[6,7,8]、[0,3,6]、[1,4,7]、[2,5,8]、[0,4,8]、[2,4,6]；
$（文档）.ready（函数（）{
buttonId=0；
对于（变量索引=0；索引<块；索引++）{
button1=document.createElement（“按钮”）；
如果（（索引=2 | |索引=5 | |索引=8）和&（按钮=3 | |按钮=6 | |按钮=9））{
button1.innerHTML=“\r\n”+”
”；
}
button1.innerHTML=“+”；
button1.id=buttonId；
button1.setAttribute（“值”，buttonId）；
button1.setAttribute（“文本”，buttonId）；
button1.style.fontFamily=“Times New Roman”；
按钮1.style.backgroundSize=“50px”；
按钮1.style.backgroundColor=“#c0”；
button1.style.fontSize=“25px”；
button1.style.marginBottom=“10px”；
button1.style.marginLeft=“5px”；
按钮1.style.marginRight=“5px”；
document.body.appendChild（按钮1）；
buttonId++；
}
});

您追加

br

的条件不正确，我在

var表=[]；
var块=9；
var-player，boardId；
获胜组合=[[0,1,2]、[3,4,5]、[6,7,8]、[0,3,6]、[1,4,7]、[2,5,8]、[0,4,8]、[2,4,6]；
$（文档）.ready（函数（）{
buttonId=0；
对于（变量索引=0；索引<块；索引++）{
button1=document.createElement（“按钮”）；
button1.innerHTML=“+”；
button1.id=buttonId；
button1.setAttribute（“值”，buttonId）；
button1.setAttribute（“文本”，buttonId）；
button1.style.fontFamily=“Times New Roman”；
按钮1.style.backgroundSize=“50px”；
按钮1.style.backgroundColor=“#c0”；
button1.style.fontSize=“25px”；
button1.style.marginBottom=“10px”；
button1.style.marginLeft=“5px”；
按钮1.style.marginRight=“5px”；
document.body.appendChild（按钮1）；
如果（（指数=2 | |指数=5 | |指数=8））{
document.body.appendChild（document.createElement（'br'））；
}
buttonId++；
}
});

CSS解决方案
您可以通过使用CSS来实现这一点，将按钮显示为块并将其向左浮动
每隔三个按钮清除一次

var表=[]；
var块=9；
var-player，boardId；
获胜组合=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
$（文档）.ready（函数（）{
buttonId=0；
对于（变量索引=0；索引<块；索引++）{
button1=document.createElement（“按钮”）；
如果（（索引=2 | |索引=5 | |索引=8）和&（按钮=3 | |按钮=6 | |按钮=9））{
button1.innerHTML=“\r\n”+”
”；
}
button1.innerHTML=“+”；
button1.id=buttonId；
button1.setAttribute（“值”，buttonId）；
button1.setAttribute（“文本”，buttonId）；
button1.style.fontFamily=“Times New Roman”；
按钮1.style.backgroundSize=“50px”；
按钮1.style.backgroundColor=“#c0”；
button1.style.fontSize=“25px”；
button1.style.marginBottom=“10px”；
button1.style.marginLeft=“5px”；
按钮1.style.marginRight=“5px”；
document.body.appendChild（按钮1）；
buttonId++；
}
});
按钮{
显示：块；
浮动：左；
}
按钮：第n个类型（3n+1）{
明确：两者皆有；
}

可能重复的：