SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    reads the ********* Crier silver trophybronze trophy longneck's Avatar
    Join Date
    Feb 2004
    Location
    Tampa, FL (US)
    Posts
    9,854
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    click table cell to check box

    so i have a table:
    Code:
    <table>
      <tr>
        <td>account</td>
        <td>l1</td>
        <td>l2</td>
      </tr>
      <tr>
        <td>123456</td>
        <td><checkbox name='123456[l1]'>name 1</td>
        <td><checkbox name='123456[l2]'>address 1</td>
      </tr>
      <tr>
        <td>654321</td>
        <td><checkbox name='654321[l1]'>name 2</td>
        <td><checkbox name='654321[l2]'>address 2</td>
      </tr>
    </table>
    i want to add some javascript so that i can click anywhere in the table cell (on the text or in the whitespace) and have the checkbox in that cell check/uncheck as appropriate. can someone help here?

    thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming this is an XML document because in (X)HTML there is no such thing as a checkbox tag (<input type="checkbox"> is the thing to use).

    First of all, give the table an id, I'm going to say it's called "addresses". Unless, of course, it's the only table, then you can just do document.getElementsByTagName('td');
    Code:
    window.onload = function() {
      var cells = document.getElementById('addresses').getElementsByTagName('td');
      for (var i = 0; i < cells.length; i++) {
        if (cells[i].firstChild.nodeName == 'checkbox') {
          cells[i].onclick = function() {
            var checkbox = this.firstChild;
            checkbox.checked = checkbox.checked ? false : true;
          }
        }
      }
    }

  3. #3
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there longneck,

    no need for javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #table1 {
        border:2px solid #999;
     }
    #table1 td {
        width:200px;
        height:40px;
        border:1px solid #000;
        text-align:center;
     }
    #table1 label {
        width:200px;
        line-height:40px;
        display:block;
     }
    </style>
    
    </head>
    <body>
    
    <table id="table1">
      <tr>
        <td>account</td>
        <td>l1</td>
        <td>l2</td>
      </tr>
      <tr>
        <td>123456</td>
        <td><label for="a"><input id="a" type="checkbox" name='123456[l1]'>name 1</label></td>
        <td><label for="b"><input id="b" type="checkbox" name='123456[l2]'>address 1</label></td>
      </tr>
      <tr>
        <td>654321</td>
        <td><label for="c"><input id="c" type="checkbox" name='654321[l1]'>name 2</label></td>
        <td><label for="d"><input id="d" type="checkbox" name='654321[l2]'>address 2</label></td>
      </tr>
    </table>
    
    </body>
    </html>
    
    
    
    
    coothead
    Last edited by coothead; May 4, 2007 at 14:38. Reason: forgot to add 'for' to labels ~ as pointed out by Raffles

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's a good idea, should have thought of it. IE6 needs the label to have a "for" attribute and the input to have a corresponding ID, otherwise it'll fail.
    HTML Code:
    <label for="a"><input id="a" type="checkbox">LABEL</label>

  5. #5
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Raffles,
    IE6 needs the label to have a "for" attribute and the input to have a corresponding ID, otherwise it'll fail.
    Thanks for pointing that out. I tested in IE7 but forgot to check in IE6.

    I have edited my original post to reflect this.

    coothead

  6. #6
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, this works pretty well, I didn't know that. so now the label is clickable. You will only need javascript when you got to highlight the whole row, and get the row clickable

  7. #7
    reads the ********* Crier silver trophybronze trophy longneck's Avatar
    Join Date
    Feb 2004
    Location
    Tampa, FL (US)
    Posts
    9,854
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    minus one point for me for not posting actual code. i violated one of my own rules: always post the actual code!

    plus one point to raffles for some excellent javascript.

    plus ten points to coothead for a really nifty idea that i ended up using.

    thanks guys!

  8. #8
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're welcome.

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I didn't get as many points.

  10. #10
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    I didn't get as many points.
    Well, you certainly deserved a few more for the correction of my faux pas.

    coothead

  11. #11
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Similar effect with <input> outside <label> and no fixed widths

    I am trying to achieve a similar effect, but I have different HTML and I'm struggling with getting the label to take up the entire height of the table cell and all or most of the width. The difference in my HTML is that the input is outside of the label instead of contained within it. I also have an img to the left of each checkbox.

    I've tried the method here with line-height and fixed widths, but I couldn't get it to work for me, and besides I'd rather have each <label> stretch out to the current width of the table cell (which could be set by the length of the text in the header) instead of having fixed height and widths on the labels

    Any width I try makes the label jump to below the input and img because I'm setting it to display: block, so I tried floating all three elements but I still couldn't get it. Can anyone give me some pointers? I want the user to be able to click in any of the whitespace above, below, or to the right of the label, even if I may not be able to make the entire table cell clickable (because the input and img are not contained within the label).

    Please excuse the inline styles for this example:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    	<head>
    		<!-- http://www.w3.org/QA/2002/04/valid-dtd-list.html -->
    		<title></title>
    		<style type="text/css">
    			tr.Selected {
    				background-color: whitesmoke;
    			}
    
    			tr.Selected label {
    				font-weight: bold;
    				color: navy;
    			}
    			
    			table td {
    				padding: 10px;
    			}
    			
    			table td input, table td img {
    			}
    			
    			table td label {
    
    			}
    		</style>
    		<link rel="stylesheet" type="text/css" href="print.css" media="print" />
    	</head>
    	<body>
    	        <div id="ctl00_ContentPlaceHolder1_pnlEdit" style="padding:0 0 0 10px">
                <div style="padding: 10px 0 0 10px">
                   <div>
    		<table class="CustomerList" cellspacing="0" cellpadding="4" rules="rows" border="1" id="ctl00_ContentPlaceHolder1_gvCustomers" style="color:Black;background-color:White;border-color:#CCCCCC;border-width:1px;border-style:None;font-family:Verdana;font-size:11px;border-collapse:collapse;">
    		<thead>
    		<tr style="color:White;background-color:#333333;font-weight:bold;">
    			<th>Select the customers for this option some generic header
    			</th>
    		</tr>
    		</thead>
    		<tbody>
    		<tr>
    			<td>
    				<div>
    					<img title="Customer" alt="Customer" id="trCustomer_26_imgCustomerEdit" src="images/Customer.gif" />
    					<input id="trCustomer_26_customer" type="checkbox" /><label for="trCustomer_26_customer">Customer One</label>
    				</div>
    			</td>
    		</tr>  
    		<tr class="Selected">
    			<td>
    				<div>
    					<img title="Customer" alt="Customer" id="trCustomer_27_imgCustomerEdit" src="images/Customer.gif" />
    					<input id="trCustomer_27_customer" type="checkbox" checked="checked" /><label for="trCustomer_27_customer">Customer Two		</label>
    				</div>
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<div>
    					<img title="Customer" alt="Customer" id="trCustomer_28_imgCustomerEdit" src="images/Customer.gif" />
    					<input id="trCustomer_28_customer" type="checkbox" /><label for="trCustomer_28_customer">Customer Three</label>
    				</div>
    			</td>
    		</tr>
    		</tbody>
    		</table>
    		</div></div></div>
    	</body>
    </html>

  12. #12
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there rlively,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <!-- http://www.w3.org/QA/2002/04/valid-dtd-list.html -->
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <style type="text/css">
    tr.Selected {
        background-color:#f5f5f5;
     }
    tr.Selected label {
        font-weight:bold;
        color:#000080;
     }
    
    table td label {
        display:block;
        width:100%;
        height:100%;
        padding:10px;
     }
    #ctl00_ContentPlaceHolder1_gvCustomers {
        color:#000;
        background-color:#fff;
        border-color:#ccc;
        border-width:1px;
        border-style:solid;
        font-family:verdana,sans-serif;
        font-size:11px;
        border-collapse:collapse;
    }
    </style>
    
    </head>
    <body>
    
    <div id="ctl00_ContentPlaceHolder1_pnlEdit" style="padding:0 0 0 10px">
    <div style="padding: 10px 0 0 10px"><div>
    <table class="CustomerList" cellspacing="0" cellpadding="0" rules="rows" border="0" id="ctl00_ContentPlaceHolder1_gvCustomers" style="">
    <thead>
    <tr style="color:#fff;background-color:#333;font-weight:bold;">
    <th>Select the customers for this option some generic header</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    <div>
    <label for="trCustomer_26_customer">
    <img title="Customer" alt="Customer" id="trCustomer_26_imgCustomerEdit" src="images/Customer.gif" />
    <input id="trCustomer_26_customer" type="checkbox" />Customer One</label>
    </div>
    </td>
    </tr>  
    <tr class="Selected">
    <td>
    <div>
    <label for="trCustomer_27_customer">
    <img title="Customer" alt="Customer" id="trCustomer_27_imgCustomerEdit" src="images/Customer.gif" />
    <input id="trCustomer_27_customer" type="checkbox" checked="checked" />Customer Two</label>
    </div>
    </td>
    </tr><tr>
    <td>
    <div>
    <label for="trCustomer_28_customer">
    <img title="Customer" alt="Customer" id="trCustomer_28_imgCustomerEdit" src="images/Customer.gif" />
    <input id="trCustomer_28_customer" type="checkbox" />Customer Three</label>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    This works OK in Firefox, Opera and IE except that in IE clicking on the image doe not activate the checkbox.
    coothead

  13. #13
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Unfortunately, the input and label are generated by ASP.NET's "CheckBox" control, and I don't think I have the option of changing the HTML rendering to enclose the input inside the label, at least not without a good bit of digging and low-level kludging. I can change the markup in the td around the input/label, but not between those elements.

    I tried floating the img, input, and label - part of the problem there is that I don't want to assign fixed pixel widths, but how will I know how much % to assign to the label when I don't know how much % the input and img will take up? It also inexplicably triggered the Explorer 6 Duplicate Characters Bug even though the page doesn't seem to fit the trigger criteria.

    So then I was back to no floating, and I set the label to display: block, but that makes it go to the next line because img and input are inline ...


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
  •