在html Javascript表中的单元格之间交换值

Swapping values between cells in html Javascript tables

本文关键字：单元格之间交换 html Javascript 更新时间：2023-09-26

我写了一个代码，它有一个4x4表，每个单元格中有数字1-15，一个单元格中有"空"。

当我单击任何相邻的单元格（上、左、右或下）为"空"时，它会交换这两个值。它似乎在中间两行工作得很好，但在顶部和底部一行却不行。有人能指出问题吗？

<script type="text/javascript">
    var test = 0;
    var startNumber = 0;
    var arrayNumbers = new Array()
    for (i = 0; i < 16; ++i) {
        if (i == 15) { arrayNumbers[i] = "empty"; }
        else {
            ++startNumber;
            arrayNumbers[i] = startNumber
        }
    }
    shuffle(arrayNumbers);
    document.write("<table id = '"table1'" border = '"1'">")
    for (k = 0; k < 4; ++k) {
        document.write("<tr>")
        for (i = 0; i < 4; ++i) {
            document.write("<td>" + arrayNumbers[test] + "</td>");
            ++test
        }
        document.write("</tr>")
    }
    document.write("</table>")
    // Table Made
    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;
        // While there remain elements to shuffle...
        while (0 !== currentIndex) {
            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }
    var table = document.getElementById('table1'),
cells = table.getElementsByTagName('td');
    var i = 0, len = cells.length
    for (var i = 0, len = cells.length; i < len; i++) {
        cells[i].onclick = function (index) {
            return function () {
                if (cells[index - 1].innerHTML == "empty" && index !== 4 && index !== 8 && index !== 12) {
                    cells[index - 1].innerHTML = cells[index].innerHTML;
                    cells[index].innerHTML = "empty";
                }
                else if (cells[index + 1].innerHTML == "empty" && index !== 3 && index !== 7 && index !== 11) {
                    cells[index + 1].innerHTML = cells[index].innerHTML;
                    cells[index].innerHTML = "empty";
                }
                if (cells[index - 4].innerHTML == "empty") {
                    cells[index - 4].innerHTML = cells[index].innerHTML;
                    cells[index].innerHTML = "empty";
                }
                if (cells[index + 4].innerHTML == "empty") {
                    cells[index + 4].innerHTML = cells[index].innerHTML;
                    cells[index].innerHTML = "empty";
                }
            }
        }
        (i)
    }
</script>

在我看来，问题是检查数组中不存在的元素，从而引发错误。即当有人点击框3时，您将使用您的方法index-4=cells[-1]进行调用。我怀疑你的所有优势都容易出错。

在每个循环中，您也可以简单地检查边界条件：

return function () {
    if ((index-1 >= 0) 
           && cells[index - 1].innerHTML == "empty" 
           && index !== 4 
           && index !== 8 
           && index !== 12) {
        cells[index - 1].innerHTML = cells[index].innerHTML;
        cells[index].innerHTML = "empty";
    }
    else if ((index+1<=15) 
           && cells[index + 1].innerHTML == "empty" 
           && index !== 3 
           && index !== 7 
           && index !== 11) {
        cells[index + 1].innerHTML = cells[index].innerHTML;
        cells[index].innerHTML = "empty";
    }
    ...
}

对你的+/-4也要这样做。这至少会让你更接近。此外，我建议安装一些可以用来调试javascript的东西（Firebug非常棒），因为这个错误很快就会显现出来。