Я работаю над тестовой страницей HTML с простой сеткой, которая имеет красные или синие квадраты. Если вы щелкнете по красному квадрату, он должен быть синим, если вы щелкнете по синему квадрату, он должен измениться на красный. Звучит просто.
У меня все настроено, поэтому есть строки с идентификатором r + rownum. В моем тестовом файле у меня просто 2 строки: r1 и r2. В каждом ряду одинаковое количество детей (сейчас 11). Но когда я делаю это:
var row = document.getElementById("r1");
alert("child count: " + row.childNodes.length);
Я получаю 23. Я получаю 23 для обоих рядов. Это вызывает проблемы, когда неправильный ящик меняет свой фон, а иногда ничего не меняется. Я опубликую свои HTML и Javascript, это довольно просто.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div.permissiongrid { width: 780px; }
div.row { display: block; width: 780px; }
span.type { width: 55px; padding: 5px; height: 55px; display: block; float: left; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; }
span.yes { background: red; }
span.no { background: blue; }
span.leftborder { border-left: 1px solid #000000; }
span.num { text-indent: 1.5em; line-height: 4em; }
p { margin: 0px; padding: 0px; }
</style>
<script type="text/javascript">
function change(rownum, field)
{
var row = document.getElementById("r" + rownum);
var box = row.childNodes[field];
alert("clicked inside element with id: r" + rownum + " has child count: " + row.childNodes.length);
if(box.className == "type no")
box.className = "type yes";
else
box.className = "type no";
}
</script>
<title>grid test</title>
</head>
<body>
<div class="permissiongrid">
<div class="row">
<span class="type leftborder">Level</span>
<span class="type">Edit Permiss-<br />ions</span>
<span class="type">Create Accout</span>
<span class="type">Edit Account</span>
<span class="type">Delete Account</span>
<span class="type">Create Page</span>
<span class="type">Edit Page</span>
<span class="type">Delete Page</span>
<span class="type">Create Category</span>
<span class="type">Edit Category</span>
<span class="type">Delete Category</span>
</div>
<div class="row" id="r1">
<span class="type leftborder num">0</span>
<span class="type no" onclick="change(1, 1)">a</span>
<span class="type yes" onclick="change(1, 2)">b</span>
<span class="type yes" onclick="change(1, 3)">c</span>
<span class="type yes" onclick="change(1, 4)">d</span>
<span class="type yes" onclick="change(1, 5)">e</span>
<span class="type yes" onclick="change(1, 6)">f</span>
<span class="type yes" onclick="change(1, 7)">g</span>
<span class="type yes" onclick="change(1, 8)">h</span>
<span class="type yes" onclick="change(1, 9)">i</span>
<span class="type yes" onclick="change(1, 10)">j</span>
</div>
<div class="row" id="r2">
<span class="type leftborder num">1</span>
<span class="type no" onclick="change(2, 1)">a</span>
<span class="type no" onclick="change(2, 2)">b</span>
<span class="type no" onclick="change(2, 3)">c</span>
<span class="type no" onclick="change(2, 4)">d</span>
<span class="type no" onclick="change(2, 5)">e</span>
<span class="type no" onclick="change(2, 6)">f</span>
<span class="type no" onclick="change(2, 7)">g</span>
<span class="type no" onclick="change(2, 8)">h</span>
<span class="type no" onclick="change(2, 9)">i</span>
<span class="type no" onclick="change(2, 10)">j</span>
</div>
</div>
</body>
</html>