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;
// 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;
// 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.name == "Box" && !ml.elements.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=http://www.webdeveloper.com/forum/archive/index.php/"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>
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;
// 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;
// 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.name == "Box" && !ml.elements.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=http://www.webdeveloper.com/forum/archive/index.php/"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>