...

View Full Version : onclick change bgcolor of certain records



ntsoul
06-16-2003, 07:46 PM
I have the a table that is populated by my query that includes all the purchases that need to be made and it is sorted by required date. Since this is sorted by required date the vendors are not in order, so when looking at the report the Purchasing department needa to find the rest of the orders for that vendor. I would like to add a check box next to the vendors name and when clicked use the onclick function and have javascript find all instances of that vendor and change there background table to a color. Any Ideas out there that might help.
Thanks inadvance for your time and effort.

cheesebagpipe
06-16-2003, 08:32 PM
'Ideas' probably aren't what you need, but an actual script that interfaces with your page, impossible without seeing its structure. Could you post some sample output?

ntsoul
06-16-2003, 09:44 PM
Here is what I have so far but I keep getting
Error: Object doesn't support this property or method


<script>
var theVendorTable="myVendorTable";
var highLightColor="#ffffcc";
var origColor="#ffffff";

function findVendor(theVendorKey) {

var rows=document.getElementById(theVendorTable).rows.length

//Set color to default
for(i=0;i<rows;i++) {
document.getElementById(theVendorTable).rows(i).style.backgroundColor=origColor;
document.getElementById(theVendorTable).rows(i).cells(0).childNodes(0).checked=false;
}

//Now color any matching ones
for(i=0;i<rows;i++) {
if(document.getElementById(theVendorTable).rows(i).getAttribute("associatedVendor")==theVendorKey) {
document.getElementById(theVendorTable).rows(i).style.backgroundColor=highLightColor;
document.getElementById(theVendorTable).rows(i).cells(0).childNodes(0).checked=true;
}
}

}
</script>

----- Omitted Coldfusion querries to produce the data --------------

<table id="myVendorTable" bordercolor="black" cellspacing="2">
<tr bgcolor="aqua">
<td>Part Number</td>
<TD></TD>
<td>Description</td>
<TD></TD>
<td>QTY</td>
<TD></TD>
<td>Rel Date</td>
<TD></TD>
<td>Req Date</td>
<TD></TD>
<td>Due Date</td>
<TD></TD>
<td>AST</td>
<TD></TD>
<td>P/M</td>
<TD></TD>
<td align="center">Messages</td>
<TD></TD>
<td align="center">Vendor</td>
</tr>
<cfoutput query="mrplist">
<CFSET ven = #vendor#>
<cfif ven is ''>
<cfset ven = 'NA'>
</cfif>
<tr id="aRow" associatedVendor="#ven#">
<td nowrap align="center"><font size="2">#rpn#</font></td>
<TD></TD>
<td align="center"><font size="2">#descrip#</font></td>
<TD></TD>
<td nowrap align="center" ><font size="2">#qty#</font></td>
<TD></TD>
<CFIF #reldt# is ''>
<cfset na = '-'>
<td nowrap align="center"><font color="white" size="2">#na#</font></td>
<cfelse>
<td nowrap align="center"><font size="2">#DateFormat(reldt, "MM-DD-YY")#</font></td>
</CFIF>
<TD></TD>
<td nowrap align="center"><font size="2">#DateFormat(reqdt, "MM-DD-YY")#</font></td>
<TD></TD>
<td nowrap align="center"><font size="2">#DateFormat(duedt, "MM-DD-YY")#</font></td>
<TD></TD>
<td nowrap align="center"><font size="2">#ast#</font></td>
<TD></TD>
<td align="center"><font size="2">#pm#</font></td>
<TD></TD>
<td align="center"><font size="2">#message#</font></td>
<TD></TD>
<TD nowrap align="right" ID=""><font size="2">#vendor#</font>
<td><input type="checkbox" onclick="findVendor('#ven#')"></td>


</tr>

</cfoutput>
</table>


Thanks for your time

Kevin A

Choopernickel
06-16-2003, 10:03 PM
kevin,

don't post the coldfusion code. it has very little, if anything at all, with the happenings of the javascript.

let us see the processed code as it appears when you view>source from your browser while looking at the page.

cheesebagpipe
06-16-2003, 11:04 PM
Ditto to Choopernickel's comment; shouldn't make others prep your code as an additional chore.

Try this...


<html>
<head>
<title>untitled</title>
<script type="text/javascript">

var highLightColor = '#ffffcc';
var origColor = 'ghostwhite';

function drill(oNode) {
while (oNode.lastChild)
oNode = oNode.lastChild;
return oNode;
}

function findVendor(bWhich, sVendor) {
var table = document.getElementById('myVendorTable');
var row, cell, cells, i = 1, j, rows = table.getElementsByTagName('tr');
while (row = rows.item(i++)) {
cells = row.getElementsByTagName('td');
j = 0;
while (cell = cells.item(j++))
if (cell.className == 'vendor')
if (drill(cell).nodeValue == sVendor) {
row.style.background = (bWhich) ? highLightColor : origColor;
cells.item(j).lastChild.checked = bWhich;
} else {
row.style.background = origColor;
cells.item(j).lastChild.checked = false;
}
}
}

</script>
</head>
<body bgcolor="#778899">
<br /><br />
<table id="myVendorTable" width="720" cellspacing="2" border="1" align="center" bordercolor="black" bgcolor="ghostwhite">
<tr bgcolor="aqua">
<th>Part Number</th>
<th>Description</th>
<th>QTY</td>
<th>Rel Date</th>
<th>Req Date</th>
<th>Due Date</th>
<th>AST</th>
<th>P/M</th>
<th align="center">Messages</th>
<th align="center">Vendor</th>
<th align="center">Find All</th>
</tr>

<script type="text/javascript">

for (var x=0; x<8; ++x)
document.write(
'<tr id="row' + x + '">' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center" ><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td align="center"><font size="2">blah</font></td>' ,
'<td align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center" class="vendor"><font size="2">joe blow</font></td>' ,
'<td align="center"><input type="checkbox" onclick="findVendor(this.checked,\\'joe blow\\')"></td>' ,
'</tr>' ,
'<tr id="row' + (x+1) + '">' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center" ><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center"><font size="2">blah</font></td>' ,
'<td align="center"><font size="2">blah</font></td>' ,
'<td align="center"><font size="2">blah</font></td>' ,
'<td nowrap align="center" class="vendor"><font size="2">ed crud</font></td>' ,
'<td align="center"><input type="checkbox" onclick="findVendor(this.checked,\\'ed crud\\')"></td>' ,
'</tr>'
);

</script>
</table>
</body>
</html>

The escapes (...onclick="findVendor(this.checked,\'ed crud\') are unnecessary in hardcoded HTML, just fyi.

ntsoul
06-17-2003, 07:28 PM
Sorry about the coldfusion code.
Thanks for the help it worked great.

Kevin A



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum