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

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

当我单击任何相邻单元格（上方、左侧、右侧或下方）以“清空”时，它会交换这两个值。它似乎在中间的2行，但不是顶和底行。有人能指出问题吗

<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>

var检验=0；
var startNumber=0；
var arrayNumbers=新数组（）
对于（i=0；i<16；++i）{
如果（i==15）{arrayNumbers[i]=“empty”；}
否则{
++startNumber；
ArrayNumber[i]=开始编号
}
}
洗牌（数组编号）；
文件。写（“”）
对于（k=0；k<4；++k）{
文件。写（“”）
对于（i=0；i<4；++i）{
编写（“+arrayNumbers[test]+”）；
++试验
}
文件。写（“”）
}
文件。写（“”）
//桌子
函数洗牌（数组）{
var currentIndex=array.length，temporaryValue，randomIndex；
//虽然还有一些元素需要洗牌。。。
而（0！==currentIndex）{
//选择剩余的元素。。。
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//并将其与当前元素交换。
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
}
var table=document.getElementById（'table1'），
cells=table.getElementsByTagName（'td'）；
变量i=0，len=cells.length
对于（变量i=0，len=cells.length；i

在我看来，问题在于检查数组中不存在的元素是否抛出错误。i、 e.当有人单击框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";
    }
    ...
}

返回函数（）{
如果（（索引-1>=0）
&&单元格[索引-1]。innerHTML==“空”
&&索引！==4
&&索引！==8
&&索引！==12）{
单元格[index-1]。innerHTML=单元格[index]。innerHTML；
单元格[index].innerHTML=“空”；
}
否则如果（（index+1）您是否检查要检查的单元格是否存在空？就像您在水平检查中所做的那样。非常感谢，但我仍然无法100%理解为什么这样可以解决问题，我对javascript不是特别精通。