Selecting the Clicked Cell of a table

**morpheus83uk** · 06-06-2011 10:16 AM

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

**mrhoo** · 06-06-2011 12:54 PM

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.

**JMRKER** · 06-06-2011 01:40 PM

Originally Posted by mrhoo

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?

**mrhoo** · 06-06-2011 06:27 PM

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.

**morpheus83uk** · 06-07-2011 03:14 AM

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

**mrhoo** · 06-07-2011 09:56 AM

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>

**morpheus83uk** · 06-08-2011 02:41 AM

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

**morpheus83uk** · 06-08-2011 03:26 AM

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

**morpheus83uk** · 06-08-2011 09:03 AM

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

**morpheus83uk** · 06-08-2011 10:32 AM

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: Selecting the Clicked Cell of a table

Thread Tools

Display

Selecting the Clicked Cell of a table

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions