Selecting Text in a Table Cell 1

[tschuler]

I have a page with a table of database records. In one of the table cells, I have an onclick event in the <td> tag that calls a function.

<td onclick="javascript:GetText(this)">

What I want to happen is that when the user clicks on the cell, the text within the cell becomes selected. I have tried and tried several different pieces of code and I have searched the web for help, but nothing that I do seems to work. Copied below is my function. Can anybody tell me what is wrong with my code and how to fix it?


This is what I came up with using my JavaScript reference book. It is for Firefox 3.0.

function GetText(TableRowObj)
{
// These 3 lines work so I must be getting the
// element object reference.
//var SelText = Trim(TableRowObj.innerHTML);
//window.alert("Cell Text: "+SelText);
//window.alert("Length: "+SelText.length);

// These 2 lines were something that I saw
// on one of the posts on the web
// that I found, but it doesn't work.
//TableRowObj.focus();
//TableRowObj.select();

var SelRange = document.createRange();
SelRange.selectNodeContents(TableRowObj);
window.selection.addRange(SelRange);
}


For Internet Explorer (version 6.0), I replaced the last 3 lines of the above function with the following, and it does not work either.

var SelRange = document.body.createTextRange();
SelRange.moveToElementText(TableRowObj);
SelRange.select();
//window.alert("Type: "+document.selection.type);

I appreciate any help.

 

[vacunita]

Have you checked what errors its producing? For instance this line:

var SelText = Trim(TableRowObj.innerHTML);

Returns an error stating that Trim is not defined in FF, and an Object required error in IE.

Try it without the trim:

var SelText = TableRowObj.innerHTML;

/code]




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[tschuler]

The Trim function is in a piece of code that is commented out in the original post.

The Trim function is my own function and it works perfectly fine. Also, the commented out code (the first 3 lines of actual JavaScript code) work perfectly fine. I commented them out, because they are not relevant to the question I am asking, but I left them in there for readers to see in order to show that the element object (the argument being input to the function) IS being passed correctly into the function. I stated in the code comments that those 3 lines of code work, supporting my claim that the element object was good.

 

[vacunita]

Ah sorry missed that part.

Anyway looks like this is one of those things that just doesn't have good cross-browser or even cross element support:

  // These 2 lines were something that I saw
      //  on one of the posts on the web
      //  that I found, but it doesn't work.
      //TableRowObj.focus();
      //TableRowObj.select();

These 2 lines actually work when the object in question is a textbox.

With that in mind you could probably dynamically change the innerHTML into a textbox, and highlight that.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[feherke]

Hi

Regarding the code for FireFox :

      [b]var[/b] SelRange [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createRange[/color][teal]();[/teal]
      SelRange[teal].[/teal][COLOR=darkgoldenrod]selectNodeContents[/color][teal]([/teal]TableRowObj[teal]);[/teal]
      window[teal].[/teal][COLOR=darkgoldenrod][highlight]getS[/highlight]election[/color][teal][highlight]()[/highlight].[/teal][COLOR=darkgoldenrod]addRange[/color][teal]([/teal]SelRange[teal]);[/teal]

<td onclick="javascript:GetText(this)">

Do not specify the [tt]javascript:[/tt] pseudo-protocol in event attributes.

Feherke.

http://free.rootshell.be/~feherke/

 

[tschuler]

Thanks everyone for the help.

feherke's code snippet did the trick for Firefox. I must have done something stupid when testing for IE, because the code snippet for IE that I had in the original post does work.