如何设置HTML表的布局,使其在<td>通过JS输入值时不发生更改?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (63)

我目前正在进行一个项目,正在从零开始编写一个2048游戏的代码。为此,我用HTML创建了一个表,但是当我通过JS在该表中输入值时,它改变了行和列的大小。当一个值被插入到子单元格中时,我希望表格布局是固定的,不管单元格是否是空的。 以下是我在HTML中的内容:

    $(document).ready(function() {
        TableInit();
    });
    
    function TableInit() {
        $("#btn").click(function() {
            $("td").empty().removeClass(); // reset table
            var rand1 = Math.floor(Math.random() * 16) //first random cell
            $("table").find("td").eq(rand1).text(2).addClass("twos"); // setting value and class "2" to first random cell
            var i = Math.floor(Math.random() * 9); // random for displaying "4" 10% of the time
            if (i == 0)
                val = 4;
            else
                val = 2;
            var rand2 = Math.floor(Math.random() * 16);
            while (rand1 == rand2) // to avoid rand1 and rand2 going to the same cell
                rand2 = Math.floor(Math.random() * 16);
            if (val == 2)
                $("table").find("td").eq(rand2).text(val).addClass("twos"); //setting value and class "2" to 2nd random cell
            else
                $("table").find("td").eq(rand2).text(val).addClass("fours"); //setting value and class "4" to 2nd random cell
    
        });
    }
    body {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        background-color: antiquewhite;
        font-size: larger;
    }
    
    h1 {
        font-size: 40px;
    }
    
    table {
        font-size: 40px;
        border-collapse: collapse;
        table-layout: fixed;
    }
    
    td {
        border: 15px solid rgb(161, 110, 110);
        background-color: LemonChiffon;
        padding: 60px;
        margin: 0px;
        font-size: 40px;
    }
    
    .twos {
        background-color: rgb(235, 185, 61);
        font-size: 40px;
    }
    
    .fours {
        background-color: rgb(136, 25, 25);
        font-size: 40px;
    }
    
    .button {
        background-color: rgb(231, 101, 14);
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
    <h1>2048</h1>
    <input type="button" value="New game" id="btn" align="center" class="button" /><br>

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</center>

有人知道怎么解决我的问题吗?

提问于
用户回答回答于

如何设置heightmax-height属性相等,并将widthmax-width属性相等?

$(document).ready(function() {
        TableInit();
    });
    
    function TableInit() {
        $("#btn").click(function() {
            $("td").empty().removeClass(); // reset table
            var rand1 = Math.floor(Math.random() * 16) //first random cell
            $("table").find("td").eq(rand1).text(2).addClass("twos"); // setting value and class "2" to first random cell
            var i = Math.floor(Math.random() * 9); // random for displaying "4" 10% of the time
            if (i == 0)
                val = 4;
            else
                val = 2;
            var rand2 = Math.floor(Math.random() * 16);
            while (rand1 == rand2) // to avoid rand1 and rand2 going to the same cell
                rand2 = Math.floor(Math.random() * 16);
            if (val == 2)
                $("table").find("td").eq(rand2).text(val).addClass("twos"); //setting value and class "2" to 2nd random cell
            else
                $("table").find("td").eq(rand2).text(val).addClass("fours"); //setting value and class "4" to 2nd random cell
    
        });
    }
 body {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        background-color: antiquewhite;
        font-size: larger;
    }
    
    h1 {
        font-size: 40px;
    }
    
    table {
        font-size: 40px;
        border-collapse: collapse;
        table-layout: fixed;
    }
    
    td {
        border: 15px solid rgb(161, 110, 110);
        background-color: LemonChiffon;
        padding: 60px;
        margin: 0px;
        font-size: 40px;
        height: 60px;
        max-height: 60px;
        width: 80px;
        max-width: 80px;
    }
    
    .twos {
        background-color: rgb(235, 185, 61);
        font-size: 40px;
    }
    
    .fours {
        background-color: rgb(136, 25, 25);
        font-size: 40px;
    }
    
    .button {
        background-color: rgb(231, 101, 14);
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
    <h1>2048</h1>
    <input type="button" value="New game" id="btn" align="center" class="button" /><br>

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</center>

扫码关注云+社区

领取腾讯云代金券