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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with Array and For Loop

    I have a checkbox with an id="chk" and a html table (myTable) loaded from a query where one of the columns is the record status (td id="RecStatus"). When I click the checkbox "on", I'm calling a function that I want to go through all records in the table and hide the ones with a RecStatus of "closed". Here's what I have thus far; I know I'm very close but I'm having issues building my array.

    Code:
    function killSomeRows(){
    var cell=document.getElementById("RecStatus");
    var tbl=document.getElementById("myTable");
    var numRows=tbl.rows.length;
    var row=document.getElementById("displayRow");
    var i=0
    //myArray is set to the # of Rows in my table
    var myArray = new Array(numRows);
    //I start my for loop and this is where I am lost
    
    for (i=0; i<=numRows; i++){
    
    //In here I want to go through each row in my table and if the "RecStatus" cell = 'Closed' and my checkbox.checked==true, I want to change the style.display = 'none'.
    //else I want those rows with a RecStatus of 'Closed' to be visible 
    //using style.display = ''
    
    if (RecStatus == 'Closed' && chk.checked==true)
    document.getElementById(row where status is closed).style.display = 'none';
    else 
    document.getElementById(row where status is closed).style.display = '';
    }
    }
    I can get it to hide the 1st record in the table if that record is closed when I click/unclick the checkbox but it appears I do not have the array set up and then the for loop is not going through each record in the array.

    I'm at a loss....I'm very new to javascript and have been looking at this all day. Any help is appreciated...thanks

    Cypress

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    No idea why you created the myArray variable.

    Also, your for loop is wrong, Should be just < and *NOT* <=

    Also, you never use the row variable you created.

    *******

    I think you need to show us the HTML of your <table> Show us at least the first 3 or 4 rows, anyway.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    By the way, it is illegal to assign the same ID to more than one element in an HTML page.

    If you are doing so, that could well explain most of your problems.

    Again, show the HTML. We can't see what's wrong with your JS without that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    No idea why you created the myArray variable.

    Also, your for loop is wrong, Should be just < and *NOT* <=

    Also, you never use the row variable you created.

    *******

    I think you need to show us the HTML of your <table> Show us at least the first 3 or 4 rows, anyway.

    Here is my table code:
    Code:
    <form name="EditHO" id="EditHO" method="post" action="CFC/HandOff.cfc?method=rRecord"> 
    <table>
    <input type="hidden" name="Id" value="#selId#">
    <input type="button" name="adding" id="Add1" value="Add New Record" onClick="location.href='AddHandOff.cfm'" style="font-size:xx-small">
    <input type="submit" name="deleting" id="deleting" value="Delete Checked Record(s)" style="font-size:xx-small" disabled>   
    <input type="button" name="emailing" id="emailing" value="Email Selected Record(s)" onClick="doEmail();" style="font-size:xx-small" disabled>
    <br /><a id="cleanfilters" href="#">Clear Filters</a>
    <br /><input type="checkbox" name="chk" id="chk" onClick="killSomeRows();">Hide/Unhide Closed Records
    <br />Row Count: <cfoutput query="retRowCount">#RC#</cfoutput>
    <div class="scrollTable" width="100%">
    <table style="table-layout:fixed" class="tablesorter" id="myTable" name="myTable" border="2" cellpadding="1" cellspacing="0" width="100%">  
    <thead>
    <tr>
    <th filter='false' width="4%"></th>
    <th width="4%" style="font-size: 7pt">ID</th>
    <th filter='false' width="7%" style="font-size: 7pt">Creation <br /> Date</th>
    <th width="5%" style="font-size: 7pt">QC <br /> Number</th>
    <th filter-type='ddl' width="6%" style="font-size: 7pt">Requestor</th>
    <th filter-type='ddl' width="6%" style="font-size: 7pt">Assigned To</th>
    <th filter='false' width="7%" style="font-size: 7pt">ETA</th>
    <th filter-type='ddl' width="6%" style="font-size: 7pt">Status</th>
    <th filter='false' style="font-size: 7pt">Description</th>
    <th filter='false' style="font-size: 7pt">Comments</th>
    <th filter='false' width="7%" style="font-size: 7pt">Last Updated</th>
    <th filter='false' width="6%" style="font-size: 7pt">Last <br /> Updated By</th>	
    </tr>
    </thead>
    <tbody id="myRows">
    <cfoutput query="retVal">
    <tr id="displayRow" style="white-space:normal>
    <input type="hidden" name="TaskId" value="#Id#" readonly="true" size="2">
    <td><input type="checkbox" value="#Id#" name="RadSelect" onClick="theChecker();"></td>    
    <td><a href="EditHandoff.cfm?ID=#urlEncodedFormat(TRIM(Id))#" style="font-size: 7pt">#Id#</a></td>
    <td id="Creation_Date" readonly="true" style="font-size: 7pt">#DateFormat(Creation_Date, "medium")#</td>
    <td id="QC_Number" readonly="true" style="font-size: 7pt">#QC_Number#</td>
    <td id="Requestor" readonly="true" style="font-size: 7pt">#Requestor#</td>
    <td id="Assigned_To" readonly="true" style="font-size: 7pt">#Assigned_To#</td>
    <td id="ETA" readonly="true" style="font-size: 7pt">#ETA#</td>
    <td id="RecStatus" readonly="true" style="font-size: 7pt">#RecStatus#</td>
    <td id="Description" readonly="true" style="word-wrap:break-word; font-size: 7pt">#Descript#</td>
    <td id="Comments" readonly="true" style="word-wrap:break-word; font-size: 7pt">#Comments#</td>
    <td id="Last_Updated_Date" readonly="true" style="font-size: 7pt">#DateFormat(Last_Updated_Date, "medium")#</td>
    <td id="Last_Updated_By" readonly="true" style="font-size: 7pt">#Last_Updated_By#</td>
    </tr>
    </cfoutput>
    </tbody>
    </table>
    </div>
    </table>
    </form>
    Then you see the function code from the first post. So I want the onClick of the checkbox to go through each record (tr) and if the "RecStatus" is 'Closed', hide that record.

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    By the way, it is illegal to assign the same ID to more than one element in an HTML page.

    If you are doing so, that could well explain most of your problems.

    Again, show the HTML. We can't see what's wrong with your JS without that.
    Which ID is assigned to more than one element?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    I don't know, because you showed us your ColdFusion code instead of HTML.

    I am *guessing* that all the code between <cfoutput query="retVal"> and </cfoutput> is duplicated once per record, in which case EVERY SINGLE LINE in that range has a duplicated ID.

    To show us the actual HTML:
    (1) bring the page up in your browser
    (2) Click on the VIEW menu of your browser.
    (3) Click on the SOURCE or PAGE SOURCE menu item.
    (4) That will show you, in a new window or editor, the HTML as it is seen by the browser. Copy/paste *that* here instead of the CF code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I don't know, because you showed us your ColdFusion code instead of HTML.

    I am *guessing* that all the code between <cfoutput query="retVal"> and </cfoutput> is duplicated once per record, in which case EVERY SINGLE LINE in that range has a duplicated ID.

    To show us the actual HTML:
    (1) bring the page up in your browser
    (2) Click on the VIEW menu of your browser.
    (3) Click on the SOURCE or PAGE SOURCE menu item.
    (4) That will show you, in a new window or editor, the HTML as it is seen by the browser. Copy/paste *that* here instead of the CF code.
    Code:
    <form name="EditHO" id="EditHO" method="post" action="CFC/HandOff.cfc?method=rRecord"> 
    <table>
    <input type="hidden" name="Id" value="#selId#">
    <input type="button" name="adding" id="Add1" value="Add New Record" onClick="location.href='AddHandOff.cfm'" style="font-size:xx-small">
    <input type="submit" name="deleting" id="deleting" value="Delete Checked Record(s)" style="font-size:xx-small" disabled>   
    <input type="button" name="emailing" id="emailing" value="Email Selected Record(s)" onClick="doEmail();" style="font-size:xx-small" disabled>
    <br /><a id="cleanfilters" href="#">Clear Filters</a>
    <br /><input type="checkbox" name="chk" id="chk" onClick="killSomeRows();">Hide/Unhide Closed Records
    <br />Row Count: 17
    <div class="scrollTable" width="100%">
    <table style="table-layout:fixed" class="tablesorter" id="myTable" name="myTable" border="2" cellpadding="1" cellspacing="0" width="100%">  
    <thead>
    <tr>
    <th filter='false' width="4%"></th>
    <th width="4%" style="font-size: 7pt">ID</th>
    <th filter='false' width="7%" style="font-size: 7pt">Creation <br /> Date</th>
    <th width="5%" style="font-size: 7pt">QC <br /> Number</th>
    <th filter-type='ddl' width="6%" style="font-size: 7pt">Requestor</th>
    <th filter-type='ddl' width="6%" style="font-size: 7pt">Assigned To</th>
    <th filter='false' width="7%" style="font-size: 7pt">ETA</th>
    <th filter-type='ddl' width="6%" style="font-size: 7pt">Status</th>
    <th filter='false' style="font-size: 7pt">Description</th>
    <th filter='false' style="font-size: 7pt">Comments</th>
    <th filter='false' width="7%" style="font-size: 7pt">Last Updated</th>
    <th filter='false' width="6%" style="font-size: 7pt">Last <br /> Updated By</th>	
    </tr>
    </thead>
    <tbody id="myRows">
     
    <tr id="displayRow" style="white-space:normal>
    <input type="hidden" name="TaskId" value="86" readonly="true" size="2">
    <td><input type="checkbox" value="86" name="RadSelect" onClick="theChecker();"></td>    
    <td><a href="EditHandoff.cfm?ID=86" style="font-size: 7pt">86</a></td>
    <td id="Creation_Date" readonly="true" style="font-size: 7pt">Dec 2, 2011</td>
    <td id="QC_Number" readonly="true" style="font-size: 7pt">45</td>
    <td id="Requestor" readonly="true" style="font-size: 7pt">js249f</td>
    <td id="Assigned_To" readonly="true" style="font-size: 7pt">tt</td>
    <td id="ETA" readonly="true" style="font-size: 7pt">65 minutes</td>
    <td id="RecStatus" readonly="true" style="font-size: 7pt">Closed</td>
    <td id="Description" readonly="true" style="word-wrap:break-word; font-size: 7pt">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</td>
    <td id="Comments" readonly="true" style="word-wrap:break-word; font-size: 7pt">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</td>
    <td id="Last_Updated_Date" readonly="true" style="font-size: 7pt">Dec 14, 2011</td>
    <td id="Last_Updated_By" readonly="true" style="font-size: 7pt">js249f</td>
    </tr>
     
    <tr id="displayRow" style="white-space:normal>
    <input type="hidden" name="TaskId" value="87" readonly="true" size="2">
    <td><input type="checkbox" value="87" name="RadSelect" onClick="theChecker();"></td>    
    <td><a href="EditHandoff.cfm?ID=87" style="font-size: 7pt">87</a></td>
    <td id="Creation_Date" readonly="true" style="font-size: 7pt">Dec 2, 2011</td>
    <td id="QC_Number" readonly="true" style="font-size: 7pt">9765</td>
    <td id="Requestor" readonly="true" style="font-size: 7pt">js249f</td>
    <td id="Assigned_To" readonly="true" style="font-size: 7pt">kujy</td>
    <td id="ETA" readonly="true" style="font-size: 7pt">64</td>
    <td id="RecStatus" readonly="true" style="font-size: 7pt">Closed</td>
    <td id="Description" readonly="true" style="word-wrap:break-word; font-size: 7pt">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
    <td id="Comments" readonly="true" style="word-wrap:break-word; font-size: 7pt">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td id="Last_Updated_Date" readonly="true" style="font-size: 7pt">Dec 12, 2011</td>
    <td id="Last_Updated_By" readonly="true" style="font-size: 7pt">js249f</td>
    </tr>

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Yep, as I suspected. See there? Each <tr> row you have *ALL* those IDs duplicated. Illegal. So once you do that, you can never use document.getElementById() to get any of them, (In some browsers, you will get the first one; in other browsers you may get none of them.)

    By the by, the readonly="true" is doing nothing at all. readonly only applies to <form> fields, such as <input>. <td> cells are fixed so readonly is ignored.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    There are a couple of ways to solve this. One is to change all those id="xxx" to class="xxx". The other way would be to sequentially number the id's. (That is, add a number to each row and that same number to each id in the row.)

    But maybe you first need to figure out why you need those ID's in the first place.

    What do you need them for, other than the "RecStatus" value?

    Why not *copy* the RecStatus to a hidden field in the row and then base your JavaScript on those hidden fields?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    There are a couple of ways to solve this. One is to change all those id="xxx" to class="xxx". The other way would be to sequentially number the id's. (That is, add a number to each row and that same number to each id in the row.)

    But maybe you first need to figure out why you need those ID's in the first place.

    What do you need them for, other than the "RecStatus" value?

    Why not *copy* the RecStatus to a hidden field in the row and then base your JavaScript on those hidden fields?
    Ok, I've changed my tr id="displayRow" to tr class="displayRow". How do I now incorporate this into my original function to check each row for their status? I believe I would use getElementByClassName...could you elaborate on this?

    Thanks.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    What did you do about "RecStatus"?? Did you make that a class name as well, or did you create a hidden field that duplicates the value, as I suggested? (Either will work, just need to know which you did. If you could show the HTML "dump" again, as it is now, that would be most helpful.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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