Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2003
    Location
    USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick change bgcolor of certain records

    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.

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    '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?

  • #3
    New to the CF scene
    Join Date
    Jun 2003
    Location
    USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [lecture] Ditto to Choopernickel's comment; shouldn't make others prep your code as an additional chore. [/lecture]

    Try this...
    Code:
    <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.
    Last edited by cheesebagpipe; 06-17-2003 at 01:09 AM.

  • #6
    New to the CF scene
    Join Date
    Jun 2003
    Location
    USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about the coldfusion code.
    Thanks for the help it worked great.

    Kevin A


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •