SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Click Table Row, Enable/Disable Checkbox

    Hello,

    I'm having a few problems .

    What I want to do is when the user clicks on a table row, it then enables/disables a checkbox held within that row.

    HTML Code:

    HTML Code:
    <form action="?action=delete" method="post">
    
    	<table>
    	<th>ID</th><th>Forename</th><th>Surname</th><th>Institution</th><th>Membership Type</th><th>Delete</th>
    
    		<tr>
    			<td>1</td>
    			<td>Forenames1</td>
    
    			<td>AAUserSurname1</td>
    			<td>University of Strathclyde</td>
    			<td>Conference</td>
    			<td><input type="checkbox" id="member_ids" name="member_ids[]" value="1" /></td>														
    		</tr>
    
    		<tr>
    			<td>2</td>
    			<td>Forenames2</td>
    
    			<td>ACUserSurname2</td>
    			<td>University of Edinburgh</td>
    			<td>Corporate</td>
    			<td><input type="checkbox" id="member_ids" name="member_ids[]" value="2" /></td>														
    		</tr>
    
    		<tr>
    			<td>3</td>
    			<td>Forenames3</td>
    
    			<td>AZUserSurname3</td>
    			<td>University of Stirling</td>
    			<td>Life</td>
    			<td><input type="checkbox" id="member_ids" name="member_ids[]" value="3" /></td>														
    		</tr>
    
    	</table>
    
    	<button type="submit" class="confirm" name="submit">Delete Selected Members</button>
    
    </form>		
    Javascript:

    Code:
    function tableRowClickSetUp() {
    	var theTrList = document.getElementsByTagName('tr');
    	
    	for (var i = 1; i < theTrList.length; i++) {
    		var theTr = theTrList.item (i);
    					
    		theTr.onclick = function () {				
    			var theInputList = this.getElementsByTagName('input');		
    			var theInput = theInputList.lastChild;
    						
    			if (theInput.checked = true) {
    				theInput.checked = false;
    			} else {
    				theInput.checked = true;
    			}				
    		}
    
    	}
    }
    Does anyone know how to do this?

    Thanks in advance

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this line is bad:
    var theInput = theInputList.lastChild;

    Try:
    var theInput = theInputList[theInputList.length-1];

  3. #3
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jim,

    I got it going now with the following code:

    Code:
    function tableRowClick() {
    	var theTrList = document.getElementsByTagName('tr');
    	
    	for (var i = 1; i < theTrList.length; i++) {
    		var theTr = theTrList.item (i);
    		
    		theTr.onclick = function () {				
    			var theInputList = this.getElementsByTagName('input');		
    			var theInput = theInputList[theInputList.length-1];
    					
    			if (theInput.checked == true) {
    					theInput.checked = false;
    			} else {
    				theInput.checked = true;
    			}		
    
    		}
    	}
    }
    However I have came across a problem, I now can't enable/disable the checkbox directly, any ideas how to fix this? I have uploaded a example at http://www.paulmowat.co.uk/test/tablerow/tablerow.html

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably because of the event bubbling (go here). You'll need to add an onclick handler for each checkbox that prevents bubbling.

    There's a way to simplify your code
    Code:
    			theInput.checked = !theInput.checked;
    is the same as
    Code:
    			if (theInput.checked == true) {
    					theInput.checked = false;
    			} else {
    				theInput.checked = true;
    			}
    P.S. Why are you using tabs for indention?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah perfect thanks brett, got mine working perfect now, i never thought about putting a check in for the 'input' field to return.


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
  •