Javascript 在表td中指定divs类名

我试图在另一个div中为一组div提供相同的类名，通过这样做，我希望将每个子div放入表中的td中

我无法更改html/css表单

希望你能帮忙

html:

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

javascript:

function loading () {
    function nameBox () {
        var bigBox = document.getElementById("puzzlearea");
        var divs = bigBox.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].className = "boxes";
        }
    }
    function tableCreate () {
        var body = document.getElementById('puzzlearea');
        var tbl = document.createElement('table');
        tbl.style.width = '400px';
        tbl.style.height = '400px';
        tbl.cellPadding = '0';
        tbl.cellSpacing = '0';
        tbl.setAttribute('border', '2');
        var tbdy = document.createElement('tbody');
        for (var i = 0; i < 4; i++) {
            var tr = document.createElement('tr');
            for (var j = 0; j < 4; j++) {
                if (i == 3 && j == 4) {break} else {
                    var td = document.createElement('td');
                    td.appendChild("boxes");
                    tr.appendChild(td)
                }
            }
            tbdy.appendChild(tr);
        }
        tbl.appendChild(tbdy);
        body.appendChild(tbl)
    }
    tableCreate();
};
window.onload = function () {
    loading();
};

函数加载（）{
函数名称框（）{
var bigBox=document.getElementById（“拼图区域”）；
var divs=bigBox.getElementsByTagName（“div”）；
对于（变量i=0；i

我对此不确定，但也许你应该尝试将你的拼图区域和div作为全局变量..ie

function loading()
{
var bigBox = document.getElementById('puzzlearea'),

`divs=document.getElementsByTagName（'div'），i

函数名称框（）
{
对于（i=0；i这应该可以做到，您有一大堆语法错误和一些逻辑错误，但我保持了程序的整体格式不变：

function loading () {
    function nameBox () {
        var bigBox = document.getElementById("puzzlearea");
        var divs = bigBox.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].className = "boxes";
        }

        // Notice I return the node list of divs so you can use it to populate
        // your grid in tableCreate
        return divs;
    }
    function tableCreate () {
        var body = document.getElementById('puzzlearea'),
            tbl  = document.createElement('table'),
            boxes = nameBox();

        // I would recommend removing this block and simply setting these
        // style attributes in CSS under an id that you give to your table
        tbl.style.width = '400px';
        tbl.style.height = '400px';
        tbl.cellPadding = '0';
        tbl.cellSpacing = '0';
        tbl.setAttribute('border', '2');

        var tbdy = document.createElement('tbody');
        for (var i = 0; i < 4; i++) {
            var tr = document.createElement('tr');

            // Notice how I've added boxes.length as a loop condition
            // this will automatically break the loop once the boxes
            // node list is empty
            for (var j = 0; j < 4 && boxes.length; j++) {
                    var td = document.createElement('td');

                    // You were appending the string "boxes" here
                    // I've changed it to append the first div
                    // remaining in the boxes node list
                    td.appendChild([].shift.call(boxes););
                    tr.appendChild(td)
            }
            tbdy.appendChild(tr);
        }
        tbl.appendChild(tbdy);
        body.appendChild(tbl)
    }
    tableCreate();
};
window.onload = function () {
    loading();
};

函数加载（）{
函数名称框（）{
var bigBox=document.getElementById（“拼图区域”）；
var divs=bigBox.getElementsByTagName（“div”）；
对于（变量i=0；i
我想你是想实现以下目标：-

function loading() {
        function nameBox() {
            var bigBox = document.getElementById("puzzlearea");
            var divs = bigBox.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++){
                divs[i].style.cssFloat = "left";
                divs[i].style.width = "19%";
                divs[i].style.border = "1px solid #ccc";
                divs[i].style.textAlign="center";
            }
        }
        nameBox();
    }
loading();

函数加载（）{
函数名称框（）{
var bigBox=document.getElementById（“拼图区域”）；
var divs=bigBox.getElementsByTagName（“div”）；
对于（变量i=0；i

它是jsfiddle
我也不确定，但是在
tableCreate（）
中有一行奇怪的代码：
td.appendChild（“框”）
。也许你可以弄清楚，OP想在这里做什么？事实上，它肯定会导致错误。不！永远不要鼓励在JS中使用全局变量，它们是造成许多可怕灾难的原因。这是众所周知的。该变量在加载函数范围内是全局错误，而不是整个窗口，因此应该可以工作，此外，他必须重新声明两个d不同的变量引用相同的“div id”，这可能是他的问题的一部分。
function loading () {
    function nameBox () {
        var bigBox = document.getElementById("puzzlearea");
        var divs = bigBox.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].className = "boxes";
        }

        // Notice I return the node list of divs so you can use it to populate
        // your grid in tableCreate
        return divs;
    }
    function tableCreate () {
        var body = document.getElementById('puzzlearea'),
            tbl  = document.createElement('table'),
            boxes = nameBox();

        // I would recommend removing this block and simply setting these
        // style attributes in CSS under an id that you give to your table
        tbl.style.width = '400px';
        tbl.style.height = '400px';
        tbl.cellPadding = '0';
        tbl.cellSpacing = '0';
        tbl.setAttribute('border', '2');

        var tbdy = document.createElement('tbody');
        for (var i = 0; i < 4; i++) {
            var tr = document.createElement('tr');

            // Notice how I've added boxes.length as a loop condition
            // this will automatically break the loop once the boxes
            // node list is empty
            for (var j = 0; j < 4 && boxes.length; j++) {
                    var td = document.createElement('td');

                    // You were appending the string "boxes" here
                    // I've changed it to append the first div
                    // remaining in the boxes node list
                    td.appendChild([].shift.call(boxes););
                    tr.appendChild(td)
            }
            tbdy.appendChild(tr);
        }
        tbl.appendChild(tbdy);
        body.appendChild(tbl)
    }
    tableCreate();
};
window.onload = function () {
    loading();
};

function loading() {
        function nameBox() {
            var bigBox = document.getElementById("puzzlearea");
            var divs = bigBox.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++){
                divs[i].style.cssFloat = "left";
                divs[i].style.width = "19%";
                divs[i].style.border = "1px solid #ccc";
                divs[i].style.textAlign="center";
            }
        }
        nameBox();
    }
loading();