www.webdeveloper.com
Results 1 to 10 of 10

Thread: Selecting the Clicked Cell of a table

  1. #1
    Join Date
    Jun 2011
    Posts
    16

    Selecting the Clicked Cell of a table

    Hello,

    I am after getting a cell value from a clicked Cell ..

    So far I have the following javascript function:

    <script type="text/javascript">

    function getInfo()
    {
    var Row = document.getElementById("tblrow");
    var Cells = Row.getElementsByTagName("td");
    alert(Cells[0].innerText);
    }

    </script>


    Which is on the onclick event of my tablerow it works fine but only gets the first name in the list regardless of which cell I click... Its in a HTA if that is relevant...

    Does anyone know how I can get it to give the value of the row which is clicked?

    Many Thanks

    James

  2. #2
    Join Date
    Feb 2006
    Posts
    2,927
    When you click in a table cell, a reference to the table cell gets attached to the event object that you are handling.
    The event will also bubble up through its containing elements, unless you stop it,
    so you can 'hear' the event on the cells row and then on its tbody, foot or head, and then on the table itself.
    But no matter where you listen for it, the target element is still the same.

    Unless you only have one cell in the element to handle events from,
    you can do all the listening from the table, and handle the event from there.

    Code:
    window.onload= function(){
        document.getElementById('tableid').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement: '';
            if(who.tagName== 'TD'){
                alert(who.id);
            }
        }
    }
    innerText is IE only.
    Use (node.textContent || node.innerText),
    or loop through the nodes child nodes for text node data.
    Last edited by mrhoo; 06-06-2011 at 02:01 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Question

    Quote Originally Posted by mrhoo View Post
    When you click in a table cell, a reference to the table cell gets attached to the event object that you are handling.
    The event will also bubble up through its containing elements, unless you stop it,
    so you can 'hear' the event on the cells row and then on its tbody, foot or head, and then on the table itself.
    But no matter where you listen for it, the target element is still the same.

    Unless you only have one cell in the element to handle events from,
    you can do all the listening from the table, and handle the event from there.

    Code:
    window.onload= function(){
        document.getElementById('tableid').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement: '';
            if(who.tagName== 'TD'){
                alert(who.id);
            }
        }
    }
    innerText is IE only.
    Use (node.textContent || node.innerText),
    or loop through the nodes child nodes for text node data.
    @mrhoo:
    The line:
    var who= e.target || e.srcElement: '';
    is giving an error at the ':' character.

    What did you have in mind with that bit of code?

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    Sorry about that- My code needed a colon-ectomy:

    Code:
    window.onload= function(){
        document.getElementById('tableid').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement;
            if(who.tagName== 'TD'){
                alert(who.id);
            }
        }
    }
    It started out like this-
    Code:
    document.getElementById('tableid').onclick= function(e){
    	var who= e? e.target: window.event? event.srcElement: '';
    	if(who.tagName== 'TD') alert(who.id);
    }
    and I edited it for clarity a little too quickly.
    Last edited by mrhoo; 06-06-2011 at 07:33 PM.

  5. #5
    Join Date
    Jun 2011
    Posts
    16
    Hello,

    I have tried the code you have provided and it does not seem to give anything as an output...

    Am I doing anything wrong?

    My full code is below:

    Code:
    [/C<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
    
    <title>SearchAD</title>
    
    <!-- 
    HTA to search AD and perform various user and computer actions 
    Also to create, modify and remove users.
    Written by James Cartwright
    -->
    
    <HTA:APPLICATION 
    
         APPLICATIONNAME="SearchAD"
         BORDER = "Thin"
         SCROLL = "no"
         SINGLEINSTANCE = "Yes"
         WINDOWSTATE = "Normal"
         SYSMENU = "No"
    > 
    
    <style type="text/css">
    .tbl{ 
    		overflow: auto;
    		height: 210px;
    		font-family: arial;
    		font-weight: normal;
    		font-size: 10pt;
    }
    
    table.tableRowHover {
    width: 600px;
    }
    table.tableRowHover tr.trHover {
    background: url(normal.jpg) no-repeat 0 0;
    position: relative;
    }
    table.tableRowHover tr:hover {
    background-position: 0 -68px;
    cursor: pointer;
    }
    table.tableRowHover td {
    height: 50px;
    background-image: none;
    }
    
    .general {
    	font-family: arial;
    	font-weight: normal;
    	font-size: 12pt;	
    
    }
    
    </style>
    </head>
    
    <script language="VBScript">
    
    Sub Window_onLoad   
     
    Set objFSO = CreateObject("Scripting.FileSystemObject")
    
        Me.ResizeTo 670,570
        Me.MoveTo ((Screen.Width / 2) - 200),((Screen.Height / 2) - 250)
        lstValues.Style.Width = 200
    
    document.getElementById("srch").style.visibility ="hidden"
        
    If objFSO.FileExists("P:\Powershell\temp.csv") Then
     document.getElementById("tblResults").style.visibility ="visible"
     document.getElementById("tblhead").style.visibility ="visible"
    Else
    document.getElementById("tblResults").style.visibility ="hidden"
    document.getElementById("tblhead").style.visibility ="hidden"
    End If
    
    End Sub
    
    Sub SubmitText 
    
    If document.getElementById("srch").style.visibility ="hidden" Then
    document.getElementById("srch").style.visibility ="visible"
    End If
    
    Set objShell = CreateObject("WScript.Shell")   
    Set objFSO = CreateObject("Scripting.FileSystemObject") 
         
    If objFSO.FileExists("P:\Powershell\temp.txt") Then
    objFSO.DeleteFile("P:\Powershell\temp.txt"),True
    End If
    
    Set textTemp = objFSO.OpenTextFile("P:\Powershell\temp.txt",8,True) 
        textTemp.WriteLine txtsearch.value
        textTemp.Close
    objShell.Run "powershell.exe &'P:\Powershell\QueryAD.ps1'",0,True
    window.location.reload()
    
     End Sub
      
    Function run
    
    Set objShell=CreateObject("Wscript.Shell")
    
    Select Case True
    	
    	Case UnlockUser.Checked
    		objShell.Run "powershell.exe -noexit &'C:\UserAdmin\UnlockUser.ps1'",0,True
    	Case ChangePW.Checked
    		objShell.Run "powershell.exe -noexit &'C:\UserAdmin\ChangePassword.ps1'",0,True
    	Case EnableUser.Checked
    		objShell.Run "powershell.exe -noexit &'C:\UserAdmin\EnableUser.ps1'",0,True
    	Case DisableUser.Checked
    		objShell.Run "powershell.exe -noexit &'C:\UserAdmin\DisableUser.ps1'",0,True
    
    End Select  
    
    End Function
    
          
    Function leave
    
    Set objFSO = CreateObject("Scripting.FileSystemObject")
          
    If objFSO.FileExists("P:\Powershell\temp.csv") Then
    objFSO.DeleteFile("P:\Powershell\temp.csv"),True
    End If
    
    window.close
    
    End Function
    
    </script>
    
    <script type="text/javascript">
    
    // function getInfo() 
    // {
    // var Row = document.getElementById("tblrow");
    // var Cells = Row.getElementsByTagName("td");
    // alert(Cells[0].innerText);
    // }
    
    window.onload= function(){
        document.getElementById('tblrow').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement;
            if(who.tagName== 'TD'){
                alert(who.id);
            }
        }
    }
    
    </script>
    
    </head>
     <body style="font:14 pt arial; color:white;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#000033', EndColorStr='#0000FF')">      
        <table width='90&#37;' height = '20%' border='0'>        
                <tr>
                      <td align="center" class="general">
                            <b>Search AD</b>
                      </td>
                </tr>
                <tr>
                      <td align='left' id="lstValues" class="general">
    						<br><br>User Search:  <input type="text" name="txtsearch" />
    						<input type="submit" value="Go" onclick="SubmitText" />
    						<img id="srch" alt="Searching..." src="searching.gif">
    			 </td>
                </tr>  
       </table>  
          
    <object ID=temp classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
      <param nAme="DataURL" value="temp.csv">
      <param nAme="UseHeader" value="true">
    </object>
    
    <table id="tblhead" cellpadding="3">
    <thead>
         <tr><th width="150">Name</th><th width="73%">OU</th></tr>
    </thead> 
    </table>
    <div class="tbl">
    <table id="tblResults" class="tableRowHover" datasrc='#temp' border="1" cellpadding="3">
         <tr id="tblrow" class="trHover">
         <td width="150"><span id="name" datafld='Name'> </span></td>
         <td><span datafld='ParentContainer'></span></td></tr>
    </table>   
    </div>
    <table>
    <col class="general" />
    <col span="2" class="general" />
    <tr>
    	<td><input type="radio" name="usrtools" value="UnlockUser" id="UnlockUser"> Unlock User Account<br>
    	<td><input type="radio" name="usrtools" value="ChangePW" id="ChangePW"> Change User Password (Complex)<br>	
    </tr>
    <tr>
    	<td><input type="radio" name="usrtools" value="EnableUser" id="EnableUser"> Enable User Account</td><br>
    	<td><input type="radio" name="usrtools" value="DisableUser" id="DisableUser"> Disable User Account</td><br>
    </tr>	
    </table>		
    			<div align="right">              
                	        <input type="button" value="Close" name="btn_Close" onClick="vbs:Execute('leave')">
                </div>            
    </body>
    </html>
    Many Thanks

    James

  6. #6
    Join Date
    Feb 2006
    Posts
    2,927
    Start small-
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset= "utf-8">
    <title>testclicks</title>
    
    <script type= "text/javascript">
    window.onload= function(){
        document.getElementById('t1').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement;
            if(who.tagName== 'TD'){
                alert(who.textContent || who.innerText || '');
            }
        }
    }
    </script>
    </head>
    <body>
    <table id= "t1">
    <tr>
    <td> <input type= "radio" name= "usrtools" value= "UnlockUser" id= "UnlockUser"> Unlock User Account</td>
    <td> <input type= "radio" name= "usrtools" value= "ChangePW" id= "ChangePW"> Change User Password(Complex)</td>
    </tr>
    <tr>
    <td> <input type= "radio" name= "usrtools" value= "EnableUser" id= "EnableUser"> Enable User Account</td>
    <td> <input type= "radio" name= "usrtools" value= "DisableUser" id= "DisableUser"> Disable User Account</td>
    </tr>
    </table>
    </body>
    </html>

  7. #7
    Join Date
    Jun 2011
    Posts
    16
    Hi,

    That seems to do what I want however I cant apply it to what I need. So when a CSV is populated and on that table it is displayed on the page. This is all fine however when I click on the actual item it does not work.

    Is there any reason for this?

    Many Thanks

    James

  8. #8
    Join Date
    Jun 2011
    Posts
    16
    Hello,

    I have sliced my code down to just the following to test:

    Code:
    <!doctype html>
    <html> 
    <head>
    
    <title>SearchAD</title>
    
    <!-- 
    HTA to search AD and perform various user and computer actions 
    Also to create, modify and remove users.
    Written by James Cartwright
    -->
    
    <HTA:APPLICATION 
    
         APPLICATIONNAME="SearchAD"
         BORDER = "Thin"
         SCROLL = "yes"
         SINGLEINSTANCE = "Yes"
         WINDOWSTATE = "Normal"
         SYSMENU = "no"
    > 
    
    <style type="text/css">
    
    body {
    background-color: #00FDB1;
    font-family: arial;
    font-size 14pt;
    }
    
    .tbl{ 
    		overflow: auto;
    		height: 310px;
    		width:100&#37;;
    		font-family: arial;
    		font-weight: normal;
    		font-size: 10pt;
    }
    
    
    table.tableRowHover {
    width: 600px;
    }
    table.tableRowHover tr.trHover {
    background: url(normal.jpg) no-repeat 0 0;
    position: relative;
    }
    table.tableRowHover tr:hover {
    background-position: 0 -68px;
    cursor: pointer;
    }
    table.tableRowHover td {
    height: 50px;
    background-image: none;
    }
    
    .general {
    	font-family: arial;
    	font-weight: normal;
    	font-size: 12pt;	
    
    }
    
    </style>
    </head>
    
    <script language="VBScript">
    
    Sub Window_onLoad   
     
    Set objFSO = CreateObject("Scripting.FileSystemObject")
    
        Me.ResizeTo 670,570
        Me.MoveTo ((Screen.Width / 2) - 200),((Screen.Height / 2) - 250)
        
    If objFSO.FileExists("P:\Powershell\temp.csv") Then
     document.getElementById("tblResults").style.visibility ="visible"
     document.getElementById("tblhead").style.visibility ="visible"
    Else
    document.getElementById("tblResults").style.visibility ="hidden"
    document.getElementById("tblhead").style.visibility ="hidden"
    End If
    
    End Sub
    
    </script>
    
    <script type="text/javascript">
    
    window.onload= function(){
        document.getElementById('tblResults').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement;
            if(who.tagName== 'TD'){
                alert(who.textContent || who.innerText || '');
            }
        }
    }
    
    
    </script>
    
    </head>
     <body class="body">      
        <object ID=temp classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
      <param nAme="DataURL" value="temp.csv">
      <param nAme="UseHeader" value="true">
    </object>
    
    <table id="tblhead" cellpadding="3">
    <thead>
         <tr><th width="150">Name</th><th width="73%">OU</th></tr>
    </thead> 
    </table>
    <div class="tbl">
    <table id="tblResults" class="tableRowHover" datasrc='#temp' border="1" cellpadding="3">
         <tr id="tblrow" class="trHover">
         <td width="150"><span id="name" datafld='Name'> </span></td>
         <td><span datafld='ParentContainer'></span></td></tr>
    </table>   
    </div>          
    </body>
    </html>
    And its still not working at all

    Can anyone shed any light on this?

    Many Thanks

    James

  9. #9
    Join Date
    Jun 2011
    Posts
    16
    Hello,

    As I now have my clickable table in an IFRAME I have the following code:

    Code:
    <!doctype html>
    <html> 
    <head>
    <style type="text/css">
    
    body {
    background-color: #00FDB1;
    font-family: arial;
    font-size 2pt;
    }
    table.tableRowHover {
    width: 640px;
    }
    table.tableRowHover tr.trHover {
    background: url(normal.jpg) no-repeat 0 0;
    position: relative;
    }
    table.tableRowHover tr:hover {
    background-position: 0 -68px;
    cursor: pointer;
    }
    table.tableRowHover td {
    height: 30px;
    background-image: none;
    }
    
    background-image: none;
    
    </style>
    </head>
    <script language="javascript">
    
    window.onload= function(){
        document.getElementById('tblrow').onclick= function(e){
        document.getElementById('tblrow').style.backgroundColor = 'silver';
            e= e || window.event;
            var who= e.target || e.srcElement;
            if(who.tagName== 'TD'){
                alert(who.textContent || who.innerText || '');
            }
        }
    }
    
    </script>
    
    </head>
     <body class="body">      
          
    <object ID=temp classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
      <param nAme="DataURL" value="temp.csv">
      <param nAme="UseHeader" value="true">
    </object>
    
    </table>
    <table id="itblResults" class="tableRowHover" datasrc='#temp' border="1" cellpadding="2">
         <tr id="tblrow" class="trHover">
         <td width="150"><span id="name" datafld='Name'> </span></td>
         <td width="73&#37;"><span datafld='ParentContainer'></span></td></tr>
    </div>      
    </body>
    </html>
    I am unsure as to why its not working.... Can anyone assist in this?

    Many Thanks

    James

  10. #10
    Join Date
    Jun 2011
    Posts
    16
    Hello,

    My code so far:

    Code:
    <!doctype html>
    <html lang="en"> 
    <head>
    <meta charset= "utf-8">
    <style type="text/css">
    
    body {
    background-color: #00FDB1;
    font-family: arial;
    font-size 2pt;
    }
    
    table{ 
    font-size: 9pt;  
    font-family: arial; 
    }
    
    table.tableRowHover {
    width: 640px;
    }
    table.tableRowHover tr.trHover {
    background: url(normal.jpg) no-repeat 0 0;
    position: relative;
    }
    table.tableRowHover tr:hover {
    background-position: 0 -68px;
    cursor: pointer;
    }
    table.tableRowHover td {
    height: 30px;
    background-image: none;
    }
    
    background-image: none;
    
    </style>
    </head>
    <script type= "text/javascript">
    
    window.onload= function(){
        document.getElementById('itblResults').onclick= function(e){
            e= e || window.event;
            var who= e.target || e.srcElement;
            if(who.tagName== 'TD'){
                alert(who.textContent || who.innerText || '');
            }
        }
    }
    
    
    </script>
    
    
    </head>
     <body class="body">      
          
    <object ID=temp classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
      <param nAme="DataURL" value="temp.csv">
      <param nAme="UseHeader" value="true">
    </object>
    
    <table id="itblResults" class="tableRowHover" datasrc='#temp' border="1">
         <tr id="tblrow" class="trHover" onclick="this.style.backgroundColor='silver';">
         	<td width="150"><span id="name" datafld= 'Name'> </span></td>
         	<td width="73%"><span datafld= 'ParentContainer'></span></td>
         </tr>
    </div>      
    </body>
    </html>
    It highlights the row when I click it and then if I click again somewhere which is NOT the text it display's fine. If I remove the silver highlighting of the row then I have to click around until I find a specific spot to trigger the event...

    Does anyone know why this would be the case?

    Many Thanks

    James

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles