javascript - 在表中转移号码

标签 javascript html css

我创建了两个表。我将第一个表命名为 atable ，将第二个表命名为 second 。在 table 上，我有 3x3(3 列 x 3 行)，在第二个 table 上，我有 1x9。我想用数字填充第一个表格，我创建了 begin() 函数，因此我将使用名为 的按钮用随机元素填充表格开始。接下来，我创建了一个名为check() 的函数，它点击第一个表(atable)。现在，我想要做的是，当我点击表格(atable)时，我希望每次点击都将数字传输到另一个表格(名为:second)。我已经创建了第二个表格，但我没有找到如何将点击从一个表发送到另一个表。

<!DOCTYPE html>
<html>
    <head>
        <script>            
            var timerid;
            var secs = 30;
            var randomNumber;
            var mclics = 0;
            var mcorrect = 0;   
        

    
            function begin() {
                            randomNumber = Math.round(Math.random() * 9);
                            
                var atable = document.getElementById("atable");
                for (i = 0; i < atable.rows.length; i++) {
                    for(j = 0; j < atable.rows[i].cells.length; j++) {
                        var a = Math.ceil(Math.random()*100);
                        atable.rows[i].cells[j].innerHTML = a;
                    }
                }
                
            }

            
            function check(trgt){
            if(trgt.tagName=="TD"){
                mclics++                            
                trgt.onclick=false;                 //for not happen again click//
            if((trgt.innerHTML%randomNumber)==0){
                mcorrect++                          //right clicks
                trgt.style.backgroundColor = "green";
            }   
            else{
                trgt.style.backgroundColor = "red";
            }
            }
            
            }
            
        </script>
    </head>

    <body>
        <input type="button" value="Start" onclick="begin()"  style="width: 30%"><br>
        <p id="anumber"></p>
        <table id="atable" border="1" onclick="check(event.target)">
            <tr>
                <td style="width: 292px; height: 39px;"> </td>
                <td style="width: 332px; height: 39px;"></td>
                <td style="width: 260px; height: 39px;">
                
            </tr>
            <tr>
                 <td style="width: 292px; height: 46px;"></td>
                <td style="width: 332px; height: 46px;"></td>
                <td style="width: 260px; height: 46px;">
            </tr>
            <tr><td style="width: 292px; height: 172px;"></td>
                <td style="width: 332px; height: 172px;"></td>
                <td style="width: 260px; height: 172px;"> </tr>
                
        </table>   

        <p >Remaining time: </p>
        <p id="atimer"></p> 

<table id="second" border="1" >
            <tr><td style="width: 292px; height: 39px;"> </td> </tr>
                <tr><td style="width: 332px; height: 39px;"></td></tr>
                
            <tr><td style="width: 292px; height: 46px;"></td></tr>
            <tr>    <td style="width: 332px; height: 46px;"></td></tr>
                
            <tr><td style="width: 332px; height: 39px;"></td></tr>
            <tr><td style="width: 332px; height: 39px;"></td></tr>
            <tr><td style="width: 332px; height: 39px;"></td></tr>
            <tr><td style="width: 332px; height: 39px;"></td></tr>
            <tr><td style="width: 332px; height: 39px;"></td></tr>
                
        </table>
    </body>
</html>

最佳答案

在第一个表上我添加了“EventListener”。当您单击一个数字字段时，该函数称为函数 getNumbers()，它将数字添加到另一个表中。这样一个数字不能被多次添加。当您单击带有数字的字段时，“EventListener”会自动删除。函数 getNumbers() 循环第二个表中的字段并填充下一个空白字段。

我已经用注释标记了你代码中的新内容 //NEW CODE LINE

示例:

<!DOCTYPE html>
<html>
<head>
    <script>
        var timerid;
        var secs = 30;
        var randomNumber;
        var mclics = 0;
        var mcorrect = 0;



        function begin() {
            randomNumber = Math.round(Math.random() * 9);

            var atable = document.getElementById("atable");
            for (i = 0; i < atable.rows.length; i++) {
                for (j = 0; j < atable.rows[i].cells.length; j++) {
                    var a = Math.ceil(Math.random() * 100);
                    atable.rows[i].cells[j].innerHTML = a;

                    // NEW CODE LINE
                    atable.rows[i].cells[j].addEventListener("click", function () {
                        getNumbers(this.innerText);
                        this.removeEventListener("click", arguments.callee);
                    });
                    // END NEW CODE LINE
                }
            }

        }

        function check(trgt) {
            if (trgt.tagName == "TD") {
                mclics++
                trgt.onclick = false;                 //for not happen again click//
                if ((trgt.innerHTML % randomNumber) == 0) {
                    mcorrect++                          //right clicks
                    trgt.style.backgroundColor = "green";
                }
                else {
                    trgt.style.backgroundColor = "red";
                }
            }

        }

        // NEW CODE LINE
        function getNumbers(x) {
            var target = document.getElementById('second').getElementsByTagName('td');
            for (var i = 0; i < target.length; i++) {
                if (target[i].innerText.length === 0) {
                    target[i].innerText = x;
                    break;
                }
            }
        }
        // END NEW CODE LINE

    </script>
</head>

<body>
    <input type="button" value="Start" onclick="begin()" style="width: 30%"><br>
    <p id="anumber"></p>
    <table id="atable" border="1" onclick="check(event.target)">
        <tr>
            <td style="width: 292px; height: 39px;"> </td>
            <td style="width: 332px; height: 39px;"></td>
            <td style="width: 260px; height: 39px;">

        </tr>
        <tr>
            <td style="width: 292px; height: 46px;"></td>
            <td style="width: 332px; height: 46px;"></td>
            <td style="width: 260px; height: 46px;">
        </tr>
        <tr>
            <td style="width: 292px; height: 172px;"></td>
            <td style="width: 332px; height: 172px;"></td>
            <td style="width: 260px; height: 172px;">
        </tr>

    </table>

    <p>Remaining time: </p>
    <p id="atimer"></p>

    <table id="second" border="1">
        <tr>
            <td style="width: 292px; height: 39px;"> </td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>

        <tr>
            <td style="width: 292px; height: 46px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 46px;"></td>
        </tr>

        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>

    </table>
</body>
</html>

版本 2:

在按下“开始”按钮之前不启动。再次按下“开始”按钮时清除两个表的内容。

<!DOCTYPE html>
<html>
<head>
    <script>
        var timerid;
        var secs = 30;
        var randomNumber;
        // var mclics = 0;
        var mcorrect = 0;

        function begin() {

            // NEW CODE LINE
            mcorrect = 0;

            var tableA = document.getElementById('atable').getElementsByTagName('td');
            for (var i = 0; i < tableA.length; i++) {
                tableA[i].style.backgroundColor = '';
                tableA[i].removeEventListener("click", getClick);
            }

            var tableB = document.getElementById('second').getElementsByTagName('td');
            for (var i = 0; i < tableB.length; i++) {
                tableB[i].innerText = '';
            }
            // END NEW CODE LINE

            randomNumber = Math.round(Math.random() * 9);

            var atable = document.getElementById("atable");
            for (i = 0; i < atable.rows.length; i++) {
                for (j = 0; j < atable.rows[i].cells.length; j++) {
                    var a = Math.ceil(Math.random() * 100);
                    atable.rows[i].cells[j].innerHTML = a;

                    // NEW CODE LINE
                    atable.rows[i].cells[j].addEventListener("click", getClick);
                    // END NEW CODE LINE
                }
            }

        }

        // function check(trgt) {
        //     if (trgt.tagName == "TD") {
        //         mclics++
        //         trgt.onclick = false;                 //for not happen again click//
        //         if ((trgt.innerHTML % randomNumber) == 0) {
        //             mcorrect++                          //right clicks
        //             trgt.style.backgroundColor = "green";
        //         }
        //         else {
        //             trgt.style.backgroundColor = "red";
        //         }
        //     }
        // }

        // NEW CODE LINE
        function getClick() {
            getNumbers(this.innerText, this);
            this.removeEventListener("click", getClick);
        }

        function getNumbers(x, y) {

            if ((y.innerHTML % randomNumber) == 0) {
                mcorrect++                          //right clicks
                y.style.backgroundColor = "green";
            }
            else {
                y.style.backgroundColor = "red";
            }

            var target = document.getElementById('second').getElementsByTagName('td');
            for (var i = 0; i < target.length; i++) {
                if (target[i].innerText.length === 0) {
                    target[i].innerText = x;
                    break;
                }
            }
        }
        // END NEW CODE LINE

    </script>
</head>

<body>
    <input type="button" value="Start" onclick="begin()" style="width: 30%">
    <br>

    <p id="anumber"></p>
    <table id="atable" border="1">
        <tr>
            <td style="width: 292px; height: 39px;"> </td>
            <td style="width: 332px; height: 39px;"></td>
            <td style="width: 260px; height: 39px;">

        </tr>
        <tr>
            <td style="width: 292px; height: 46px;"></td>
            <td style="width: 332px; height: 46px;"></td>
            <td style="width: 260px; height: 46px;">
        </tr>
        <tr>
            <td style="width: 292px; height: 172px;"></td>
            <td style="width: 332px; height: 172px;"></td>
            <td style="width: 260px; height: 172px;">
        </tr>

    </table>

    <p>Remaining time: </p>
    <p id="atimer"></p>

    <table id="second" border="1">
        <tr>
            <td style="width: 292px; height: 39px;"> </td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>

        <tr>
            <td style="width: 292px; height: 46px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 46px;"></td>
        </tr>

        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>
        <tr>
            <td style="width: 332px; height: 39px;"></td>
        </tr>

    </table>
</body>
</html>

关于javascript - 在表中转移号码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65083806/

上一篇：javascript - 基于 firebase 数据在 html 上显示 Canvas 时出错

下一篇：c++ - C++中的二叉搜索树复制构造函数

相关文章：

javascript - 如何在本地存储中保存和加载 HTML5 Canvas？

javascript - 我怎样才能让我的轮播在 Angular 8 中工作

javascript - 如果鼠标悬停在图像div上，则显示图像div对应的信息div

css - 如何在更改字体大小的情况下使文本在 block 元素中垂直居中？

javascript - HTML-CSS-JS 我怎样才能把它变成 'text carousel' ？

javascript - 如何使用 jQuery 在事件处理程序上获取文档，除了文档中的一个类？

javascript - jQuery:当悬停在主元素上时如何悬停子元素的子元素

html - 将鼠标悬停在链接更改背景图片上

php - 发布输入类型文件问题 未发布任何值

javascript - 无法将 javascript 代码集成到我的 html 中

©2024 IT工具网  联系我们