Im working on a HTML test page with a simple grid that has red or blue squares. If you click a red square it should be blue, if you click a blue square it should change to red. Sounds easy.
I have it set up so there are rows with id's r + rownum. In my testfile i just have 2 rows: r1 and r2. Each row has the same number of children (right now 11). But when I do this:
var row = document.getElementById("r1");
alert("child count: " + row.childNodes.length);
I get 23. I get 23 for both rows. This is causing problems where wrong box gets its background changed and sometimes nothing changes. I'll post my html and javscript, its pretty straightforward.
<!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>