SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get id of just selected checkbox

    Hi,

    I found this excellent javascript to do a Click-and-drag to select multiple checkboxes. I use this code in a calander app to make it easy to select a time period.

    There is only one thing missing, I would like to highlight the table row when a checkbox is checked. I know how to highlight a row:

    Code JavaScript:
    color1 = 'ffffcc';
    document.getElementById('row1').style.backgroundColor = color1;

    But how do I get the Id for the row, when I only have this.CheckboxObj?


    Code JavaScript:
    this.CheckboxObj.style.backgroundColor = color1;

    only highlights the checkbox.

    One solution I can think of is looping over all checkboxes and highlighting the rows that are checked and unhighlight the rows that are not, but this is to slow as I have over 200 checkboxes.

  2. #2
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the parentNode property to access the td elements.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tnx bals28mjk,

    I'am new to javascript and didn't know about parentnode, tnx I will try it.

    I found another solution using this.checkbox.value giving the row the same name with "row" added to it.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't really need to give any of the elements IDs, unless you have plans other than highlighting the selected row.

    Here's a very simple example:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var highlightedTR;
    function setupEvents() {
    	var tbl = document.getElementById("highlightRowsInThisTable");
    	
    	var inputs = tbl.getElementsByTagName("input");
    	
    	for (var i=0; i < inputs.length; i++) {
    		if (inputs[i].type == "checkbox") {
    			inputs[i].onclick = function () {
    				var myTR = this.parentNode.parentNode;
    				if (myTR !== highlightedTR) {
    					if (highlightedTR) {
    						highlightedTR.style.backgroundColor = "";
    					}
    					highlightedTR = myTR;
    					myTR.style.backgroundColor = "red";
    				}
    			}
    		}
    	}
    
    }
    
    window.onload = setupEvents;
    </script>
    </head>
    <body>
    <form>
    <table id="highlightRowsInThisTable">
    	<tr><td>Row one</td><td><input type="checkbox" name="check1" /></td></tr>
    	<tr><td>Row two</td><td><input type="checkbox" name="check2" /></td></tr>
    	<tr><td>Row three</td><td><input type="checkbox" name="check3" /></td></tr>
    	<tr><td>Row four</td><td><input type="checkbox" name="check4" /></td></tr>
    	<tr><td>Row five</td><td><input type="checkbox" name="check5" /></td></tr>
    </table>
    </form>
    </body>
    </html>


Bookmarks

Posting Permissions

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