Dynamically-generated object names [Archive]

Click to See Complete Forum and Search --> : Dynamically-generated object names

dominick

04-21-2003, 12:22 AM

Hello all:

First let me say thanks in advance for your help - you guys are the best. I have used your help in the past to get me to this point and I've almost got it completed - just one small simple (I think) thing that has me stumped.

I need to create a scenario that resembles a Hotmail inbox:

1) Table of multiple rows w/2 cells each, background color = white.
2) The first cell in each row contains a checkbox
3) Clicking on the checkbox changes the row's background color to yellow
4) Removing the check from the checkbox returns the row's background color to white.
5) Clicking on the "Check/Uncheck All" checkbox selects/unselects all items and changes the background color accordingly.

In the code below this works fine, since all the checkbox objects have the same name and the script refers to that name.

The tricky part:

In reality, the form will be created dynamically, and as such each checkbox will be given a sequential name (Box1, Box2, Box3, etc.)

I have been unable to figure out how to get the script to recognize the fact that the checkbox objects will have a different numerical identifier in their name. I was hoping that I could simply refer to the object "Box" and add a wildcard to it to allow for the numerics, but it's not working out.

Any ideas would be greatly appreciated, and in fact I would gladly offer a token of my gratitude with a small gift.

Thanks again,

Dominick

===============================

<html>
<head>
<title>Untitled</title>

<style>
td {font-family: verdana; font-size : 11px;}
.row_white {background-color : #ffffff;}
.row_yellow {background-color : #fffacd;}
</style>

<script language="javascript" type="text/javascript">
function Toggle(e){
if (e.checked) {
Highlight(e);
document.MyForm.lastcheckall.checked = AllChecked();}
else {
Unhighlight(e);
document.MyForm.lastcheckall.checked = false;
}}

function ToggleAll(e){
if (e.checked) {CheckAll();}
else {ClearAll();}}

function Check(e){
e.checked = true;
Highlight(e);}

function Clear(e){
e.checked = false;
Unhighlight(e);}

function CheckAll(){
var ml = document.MyForm;
var len = ml.elements.length;
for (var i = 0; i < len; i++) {
var e = ml.elements[i];

// Here's the first of three:
if (e.name == "Box") {
Check(e);}}
ml.lastcheckall.checked = true;}

function ClearAll(){
var ml = document.MyForm;
var len = ml.elements.length;
for (var i = 0; i < len; i++) {
var e = ml.elements[i];

// the second...
if (e.name == "Box") {
Clear(e);}}
ml.lastcheckall.checked = false;}

function Highlight(e){
var r = null;
if (e.parentNode && e.parentNode.parentNode) {
r = e.parentNode.parentNode;}
else if (e.parentElement && e.parentElement.parentElement) {
r = e.parentElement.parentElement;}
if (r) {
(r.className == "row_white")
r.className = "row_yellow";}
}

function Unhighlight(e){
var r = null;
if (e.parentNode && e.parentNode.parentNode) {
r = e.parentNode.parentNode;}
else if (e.parentElement && e.parentElement.parentElement) {
r = e.parentElement.parentElement;}

if (r) {
(r.className == "row_yellow")
r.className = "row_white";}
}

function AllChecked(){
ml = document.MyForm;
len = ml.elements.length;
for(var i = 0 ; i < len ; i++) {

// and the third:
if (ml.elements[i].name == "Box" && !ml.elements[i].checked) {
return false;
}}
return true;}
</script>

</head>

<body>

<form name="MyForm">

<table bgcolor="#b7b7b7" border="0" cellpadding="2" cellspacing="1" width="200">
<tr>
<td width="25"><input name="lastcheckall" onClick="ToggleAll(this)" title="Check or uncheck all messages." type="checkbox" value="3"></td>
<td width="175"><b>Check/Uncheck all</b></td>
</tr>

<tr class="row_white">
<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box"></td>
<td>One</td>
</tr>

<tr class="row_white">
<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box"></td>
<td>Two</td>
</tr>

<tr class="row_white">
<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box"></td>
<td>Three</td>
</tr>
</table>

</form>

</body>
</html>

Mr J

04-21-2003, 04:36 AM

Please try the following

<html>
<head>
<title>Untitled</title>

<style>
td {font-family: verdana; font-size : 11px;}
.row_white {background-color : #ffffff;}
.row_yellow {background-color : #fffacd;}
</style>

<script language="javascript" type="text/javascript">
c=0 //added
function Toggle(e){
if (e.checked) {
c++ //added
Highlight(e);
//document.MyForm.lastcheckall.checked = AllChecked();
}
else {
c-- //added
Unhighlight(e);
//document.MyForm.lastcheckall.checked = false;
}
if(c==3){ //added
document.MyForm.lastcheckall.checked = AllChecked(); //added
} //added
if(c<3){ //added
document.MyForm.lastcheckall.checked = false; //added
} //added
}

function ToggleAll(e){
if (e.checked) {CheckAll();}
else {ClearAll();}}

function Check(e){
e.checked = true;
Highlight(e);}

function Clear(e){
e.checked = false;
Unhighlight(e);}

function CheckAll(){
c=3 //added
var ml = document.MyForm;
var len = ml.elements.length;
for (var i = 0; i < len; i++) {
var e = ml.elements[i];

// Here's the first of three:
if (e.name == "Box"+[i-1]) { //changed
Check(e);}}
ml.lastcheckall.checked = true;}

function ClearAll(){
c=0 //added
var ml = document.MyForm;
var len = ml.elements.length;
for (var i = 0; i < len; i++) {
var e = ml.elements[i];

// the second...
if (e.name == "Box"+[i-1]) { //changed
Clear(e);}}
ml.lastcheckall.checked = false;}

function Highlight(e){
var r = null;
if (e.parentNode && e.parentNode.parentNode) {
r = e.parentNode.parentNode;}
else if (e.parentElement && e.parentElement.parentElement) {
r = e.parentElement.parentElement;}
if (r) {
(r.className == "row_white")
r.className = "row_yellow";}
}

function Unhighlight(e){
var r = null;
if (e.parentNode && e.parentNode.parentNode) {
r = e.parentNode.parentNode;}
else if (e.parentElement && e.parentElement.parentElement) {
r = e.parentElement.parentElement;}

if (r) {
(r.className == "row_yellow")
r.className = "row_white";}
}

function AllChecked(){
ml = document.MyForm;
len = ml.elements.length;
for(var i = 0 ; i < len ; i++) {

// and the third:
if (ml.elements[i].name == "Box" && !ml.elements[i].checked) {
return false;
}}
return true;}
</script>

</head>

<body>

<form name="MyForm">

<table bgcolor="#b7b7b7" border="0" cellpadding="2" cellspacing="1" width="200">
<tr>
<td width="25"><input name="lastcheckall" onClick="ToggleAll(this)" title="Check or uncheck all messages." type="checkbox" value="3"></td>
<td width="175"><b>Check/Uncheck all</b></td>
</tr>

<tr class="row_white">
<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box0"></td>
<td>One</td>
</tr>

<tr class="row_white">
<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box1"></td>
<td>Two</td>
</tr>

<tr class="row_white">
<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box2"></td>
<td>Three</td>
</tr>
</table>

</form>

</body>
</html>

dominick

04-21-2003, 08:11 AM

Mr J:

Sincere thanks for your reply.

Your suggestion works based on my explanation, but as it turns out my explanation of how the object will be named was flawed:

The checkbox will in fact be named "Box", that much is true. "Box" will be followed by an identifier, which as it turns out may be alpha or numeric, and not necessarily in sequence.

I did not have access to the back-end data until trying to implement the script so I apologize for not being accurate.

My first inclination was to create a string consisting of "Box" + "*" to recognize the unique identifier, but that was unsuccessful. Is there some way I can just insert a wildcard into the appropriate places to make this happen? That would make this quite simple to solve, although I have learned that what seems to be the easy way is generally not possible.

Thanks again,

Dominick