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.
我试图在另一个div中为一堆div提供相同的类名,并且通过这样做,我希望将每个子div放入表中的td。
I can't change the html/css sheets.
我无法更改html / css表。
Hope you can help!
希望你能帮忙!
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();
};
3 个解决方案
#1
1
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();
};
#2
0
i am not sure about this but maybe you should try putting your puzzle-area and div to be global variables..ie..
我不确定这一点,但也许你应该尝试把你的拼图区和div作为全局变量......我...
function loading()
{
var bigBox = document.getElementById('puzzlearea'),
` divs = document.getElementsByTagName('div'), i;
`divs = document.getElementsByTagName('div'),i;
function nameBox()
{
for( i=0; i<divs.length; i++ )
{
divs[i].className = 'boxes';
}
}
}
and then go on with the other function just modifying the variable..
然后继续使用其他函数只修改变量..
#3
0
I think you were tryin to acheive this :-
我想你试着去实现这个目标: -
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();
It is JSFIDDLED HERE
这是JSFIDDLED
#1
1
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();
};
#2
0
i am not sure about this but maybe you should try putting your puzzle-area and div to be global variables..ie..
我不确定这一点,但也许你应该尝试把你的拼图区和div作为全局变量......我...
function loading()
{
var bigBox = document.getElementById('puzzlearea'),
` divs = document.getElementsByTagName('div'), i;
`divs = document.getElementsByTagName('div'),i;
function nameBox()
{
for( i=0; i<divs.length; i++ )
{
divs[i].className = 'boxes';
}
}
}
and then go on with the other function just modifying the variable..
然后继续使用其他函数只修改变量..
#3
0
I think you were tryin to acheive this :-
我想你试着去实现这个目标: -
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();
It is JSFIDDLED HERE
这是JSFIDDLED