Search code examples
javascriptclasshtmlappendchild

give divs class name inside table td


I'm trying to give a bunch of divs the same class name inside of another div, and by doing that, I hope to put each child div into a td inside a table.

I can't change the html/css sheets.

Hope you can help!

http://jsfiddle.net/6mkYL/1/

html:

<div id="puzzlearea">
            <!-- the following are the fifteen puzzle pieces -->
            <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
            <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
            <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
            <div>13</div> <div>14</div> <div>15</div>
        </div>

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();
};

Solution

  • This should do it, you had a bunch of syntax errors and some missteps in logic, but I've kept the overall format of the program the same:

    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();
    };