How to select a table clicking a button?

**Ben Measures** · Jul 23 '05, 01:39 PM

Re: How to select a table clicking a button?

Botao wrote:[color=blue]
> Hi, Every Guru,
>
> I'd like to put a button on a page. When clicking the button, the
> table below it gets selected so the user can do Ctrl C to copy the
> entire table without using the mouse to select the table which can be
> big. How do I do it using javascript? I tried:
>
> <INPUT TYPE=Button NAME='Select' SIZE='10' VALUE='SelctTab le'
> onClick="docume nt.MyTable.sele ct();">
>
> <table name = MyTable border=1>
> <tr><td>This is the table</td></tr>
> </table>
>
> I got error "document.MyTab le is null or not an object".
>
> Could anyone help please? Thanks in advance![/color]

Use "" to surround the attribute values. It is almost always correct to
do so (and never incorrect afaik).

There is no 'name' attribute for the <table> tag in the HTML4.01 w3.org
standard. Use 'id' instead.

DOM Level 2 HTML only specifies select() for input and textareas.
Furthermore this won't do what you want it to do.

I have not seen any standard Javascript method of making selections.

--
Ben M.

**Yann-Erwan Perio** · Jul 23 '05, 01:39 PM

Re: How to select a table clicking a button?

Botao wrote:
[color=blue]
> I'd like to put a button on a page. When clicking the button, the
> table below it gets selected so the user can do Ctrl C to copy the
> entire table without using the mouse to select the table which can be
> big. How do I do it using javascript?[/color]

You'll be able to do the selection by using so-called 'ranges,' which
are so far supported by IE4+ and Mozilla. The copy command can also be
performed, in IE by using execCommand and in Mozilla by using clipboard
helpers (which however require higher security privileges).
[color=blue]
> I got error "document.MyTab le is null or not an object".[/color]

That's because the way you try to get a reference to the table object
isn't correct, give a look at

<URL:http://www.jibbering.c om/faq/faq_notes/alt_dynwrite.ht ml#getEl>
[color=blue]
> Could anyone help please? Thanks in advance![/color]

<table id="trainOfThou ght">
<tr><td>As I Am</td></tr>
<tr><td>This Dying Soul</td></tr>
<tr><td>Endle ss Sacrifice</td></tr>
<tr><td>Honor Thy Father</td></tr>
<tr><td>Vacan t</td></tr>
<tr><td>Strea m Of Consciousness</td></tr>
<tr><td>In The Name Of God</td></tr>
</table>

<script type="text/javascript">
var Utils = {
NOT_SUPPORTED : {},

DOM : {
getElementWithI d : function() {
var func=function() {return Utils.NOT_SUPPO RTED;}
if(document.get ElementById) {
func=function(i d){
return document.getEle mentById(id);
}
} else if(document.all ) {
func=function(i d) {
return document.all[id];
}
}
return (this.getElemen tWithId=func)() ;
}
},

Ranges : {
create : function() {
var func=function() {return Utils.NOT_SUPPO RTED};
if(document.bod y && document.body.c reateTextRange) {
func=function() {return document.body.c reateTextRange( );}
} else if(document.cre ateRange) {
func=function() {return document.create Range();}
}
return (this.create=fu nc)();
},
selectNode : function(node, originalRng) {
var func=function() {return Utils.NOT_SUPPO RTED;};
var rng=this.create (), method="";
if(rng.moveToEl ementText) method="moveToE lementText";
else if(rng.selectNo de) method="selectN ode";
if(method)
func=function(n ode, rng){
rng=rng||Utils. Ranges.create() ;
rng[method](node);
return rng;
}
return rng=null,(this. selectNode=func )(node, originalRng);
}
},

Selection : {
clear:function( ) {
var func=function() {return Utils.NOT_SUPPO RTED};
if(typeof document.select ion!="undefined ") {
func=function() {
if(document.sel ection && document.select ion.empty) {
return (Utils.Selectio n.clear=functio n(){
if(document.sel ection)
document.select ion.empty();
})();
}
}
} else if(window.getSe lection) {
var sel=window.getS election();
if(sel.removeAl lRanges) {
func=function() {
window.getSelec tion().removeAl lRanges();
}
}
sel=null;
}
return (this.clear=fun c)();
},
add : function(origin alRng) {
var func=function() {return Utils.NOT_SUPPO RTED};
var rng=Utils.Range s.create();
if(rng.select) {
func=function(r ng){rng.select( );}
} else if(window.getSe lection) {
var sel=window.getS election();
if(sel.addRange ) {
func=function(r ng){window.getS election().addR ange(rng);}
}
sel=null;
}
return (this.add=func) (originalRng);
}
}
};

(function() {
var rng=Utils.Range s.create();
var ele=Utils.DOM.g etElementWithId ("trainOfThough t");
if(rng!=Utils.N OT_SUPPORTED && ele!=Utils.NOT_ SUPPORTED) {
document.write(
"<form>"+
"<input type='button' value='Select!' onclick='"+
"Utils.Selectio n.clear();"+
"Utils.Selectio n.add("+
"Utils.Ranges.s electNode("+
"Utils.DOM.getE lementWithId(\" trainOfThought\ ")"+
")"+
")"+
"'>"+
"<\/form>"
);
}
})();
</script>

HTH
Yep.

**Botao** · Jul 23 '05, 01:40 PM

Re: How to select a table clicking a button?

Yep,

Thanks much for your reply. Too bad the "range" is only supported in
IE4. So I guess there is no way in IE5 to do "selecting" using
javascript.

Botao

**Yann-Erwan Perio** · Jul 23 '05, 01:40 PM

Re: How to select a table clicking a button?

Botao wrote:
[color=blue]
> Thanks much for your reply. Too bad the "range" is only supported in
> IE4. So I guess there is no way in IE5 to do "selecting" using
> javascript.[/color]

There's a misunderstandin g, Botao. I've written IE4+, which means *from*
IE4 onwards, so the script should also work on IE5, IE5.5 and IE6:-)

To test it by yourself, create a blank HTML file, copy-paste the code
I've provided, and run the HTML page into your favorite browser. If the
command button is visible, then this means that the script is supported
(even though, from a technical point of view, I could have been a bit
more precise when deciding whether to write the button).

Regards,
Yep.

**Richard Cornford** · Jul 23 '05, 01:40 PM

Re: How to select a table clicking a button?

Yann-Erwan Perio wrote:
<snip>[color=blue]
> var Utils = {
> NOT_SUPPORTED : {},
>
> DOM : {
> getElementWithI d : function() {[/color]
^^
I suspect that the outermost function was intended to have an - id -
parameter.

<snip>[color=blue]
> }
> return (this.getElemen tWithId=func)() ;[/color]
<snip> ^^
- and that it should be passed on to the first execution of the inner
function.

Richard.

**Yann-Erwan Perio** · Jul 23 '05, 01:41 PM

Re: How to select a table clicking a button?

Richard Cornford wrote:
[color=blue]
> I suspect that the outermost function was intended to have an - id -
> parameter.[/color]

Argh. You suspect well indeed:-(

(Well, you could also see that as a two-step-or-nothing init;-))
[color=blue]
> - and that it should be passed on to the first execution of the inner
> function.[/color]

getElementWithI d : function(id) {
var func=function() {return Utils.NOT_SUPPO RTED;}
if(document.get ElementById) {
func=function(i d){
return document.getEle mentById(id);
}
} else if(document.all ) {
func=function(i d) {
return document.all[id];
}
}
return (this.getElemen tWithId=func)(i d);
}

is now okay. Thanks for the correction.

**Brett Merkey** · Jul 23 '05, 01:41 PM

Re: How to select a table clicking a button?

"Botao" wrote in message
news:ff93a86a.0 409150615.c088b 71@posting.goog le.com...[color=blue]
> Thanks much for your reply. Too bad the "range" is only supported in
> IE4. So I guess there is no way in IE5 to do "selecting" using
> javascript.[/color]

If your concern is Windows IE, you can replace that entire pile
of obfuscating syntax with two lines:
var oControlRange = document.body.c reateTextRange( );
oControlRange.m oveToElementTex t(obj);

Look up moveToElementTe xt. All you do is give it an object

reference to the table in the form of document.getEle mentById("table ID")

Brett

**Botao** · Jul 23 '05, 01:42 PM

Re: How to select a table clicking a button?

Thank you very much. It works!

Yann-Erwan Perio <y-e.perio@em-lyon.com> wrote in message news:<414888a2$ 0$17702$626a14c e@news.free.fr> ...[color=blue]
> Richard Cornford wrote:
>[color=green]
> > I suspect that the outermost function was intended to have an - id -
> > parameter.[/color]
>
> Argh. You suspect well indeed:-(
>
> (Well, you could also see that as a two-step-or-nothing init;-))
>[color=green]
> > - and that it should be passed on to the first execution of the inner
> > function.[/color]
>
> getElementWithI d : function(id) {
> var func=function() {return Utils.NOT_SUPPO RTED;}
> if(document.get ElementById) {
> func=function(i d){
> return document.getEle mentById(id);
> }
> } else if(document.all ) {
> func=function(i d) {
> return document.all[id];
> }
> }
> return (this.getElemen tWithId=func)(i d);
> }
>
> is now okay. Thanks for the correction.[/color]

**Botao** · Jul 23 '05, 01:42 PM

Re: How to select a table clicking a button?

This code deos not work but the originanl works.
[color=blue][color=green][color=darkred]
>>>return (this.getElemen tWithId=func)(i d);<<<<[/color][/color][/color]

Yann-Erwan Perio <y-e.perio@em-lyon.com> wrote in message news:<414888a2$ 0$17702$626a14c e@news.free.fr> ...[color=blue]
> Richard Cornford wrote:
>[color=green]
> > I suspect that the outermost function was intended to have an - id -
> > parameter.[/color]
>
> Argh. You suspect well indeed:-(
>
> (Well, you could also see that as a two-step-or-nothing init;-))
>[color=green]
> > - and that it should be passed on to the first execution of the inner
> > function.[/color]
>
> getElementWithI d : function(id) {
> var func=function() {return Utils.NOT_SUPPO RTED;}
> if(document.get ElementById) {
> func=function(i d){
> return document.getEle mentById(id);
> }
> } else if(document.all ) {
> func=function(i d) {
> return document.all[id];
> }
> }
> return (this.getElemen tWithId=func)(i d);
> }
>
> is now okay. Thanks for the correction.[/color]

**Botao** · Jul 23 '05, 01:42 PM

Re: How to select a table clicking a button?

Thanks again Yann-Erwan Perio.

Could I ask one more thing? How could I on top of you code, add copy
command to copy the selection. Then open an word or excel, paste the
selection to a excel or work doc?

Thanks in advance!

Botao

Yann-Erwan Perio <y-e.perio@em-lyon.com> wrote in message news:<414888a2$ 0$17702$626a14c e@news.free.fr> ...[color=blue]
> Richard Cornford wrote:
>[color=green]
> > I suspect that the outermost function was intended to have an - id -
> > parameter.[/color]
>
> Argh. You suspect well indeed:-(
>
> (Well, you could also see that as a two-step-or-nothing init;-))
>[color=green]
> > - and that it should be passed on to the first execution of the inner
> > function.[/color]
>
> getElementWithI d : function(id) {
> var func=function() {return Utils.NOT_SUPPO RTED;}
> if(document.get ElementById) {
> func=function(i d){
> return document.getEle mentById(id);
> }
> } else if(document.all ) {
> func=function(i d) {
> return document.all[id];
> }
> }
> return (this.getElemen tWithId=func)(i d);
> }
>
> is now okay. Thanks for the correction.[/color]

**Yann-Erwan Perio** · Jul 23 '05, 01:42 PM

Re: How to select a table clicking a button?

Botao wrote:
[color=blue]
> Could I ask one more thing? How could I on top of you code, add copy
> command to copy the selection. Then open an word or excel, paste the
> selection to a excel or work doc?[/color]

In a normal security environment this is not possible, and you haven't
stated in which environment you're working. I suspect you're intending
the code for an IE-based intranet, though.

There can be a big difference between Internet scripting and Intranet
scripting. When designing for the Web, you have to take into account
that the runtime environment cannot be known for sure (there are more
than 100 browsers available), and that the script will fail inevitably
on some user agents. You therefore need to use a very defensive coding
approach, so that the script works fine on supporting platforms, and
fails silently on others (concept of clean degradation) - the original
script was coded in this perspective, which added a complexity overhead
(all the more the ranges' models differ greatly between IE's and W3C's).

On the other hand, coding for an intranet enables simpler approaches and
extended functionalities , since:
- you know the user agent,
- you know that javascript is enabled,
- you know that the security settings are high enough to use external
components (namely for IE, ActiveX).

This can simplify things greatly; see below (script intended for IE5+
with high security settings).

<table id="foo">
<tr><td>Java</td></tr>
<tr><td>Pizza </td></tr>
<tr><td>Nice</td></tr>
</table>

<form>
<input type="button" value="=> Excel/Word" onclick="bar('f oo')">
</form>

<script type="text/javascript">
function bar(nodeId) {
var node=document.g etElementById(n odeId);
var rng=document.bo dy.createTextRa nge();
var xl, wd;

//first select
rng.moveToEleme ntText(node);
rng.select();

//then copy
document.execCo mmand("copy");

//transfer to Excel
xl=new ActiveXObject(" Excel.Applicati on");
xl.visible=true ;
with(xl.Workboo ks.Add().Sheets (1)){
Cells.NumberFor mat="@";
Paste();
Cells.NumberFor mat="general";
}

//transfer to Word
wd=new ActiveXObject(" Word.Applicatio n");
wd.visible=true ;
wd.Documents.Ad d().Range().Pas te();
}
</script>

**Antonie C Malan Snr** · Jul 23 '05, 01:47 PM

Re: How to select a table clicking a button?

Hi Botao,

Try this:

<table name="whatever" id="theTable">
Then go on with the rows, columns and content as you most likely have done.

In your JavaScript create a function, say:

function selectTable(){
var myTable = document.getEle mentById("theTa ble");
myTable.focus() ;
}

It may work, but I can't guarantee it.

Chris

Botao wrote:[color=blue]
> Hi, Every Guru,
>
> I'd like to put a button on a page. When clicking the button, the
> table below it gets selected so the user can do Ctrl C to copy the
> entire table without using the mouse to select the table which can be
> big. How do I do it using javascript? I tried:
>
> <INPUT TYPE=Button NAME='Select' SIZE='10' VALUE='SelctTab le'
> onClick="docume nt.MyTable.sele ct();">
>
> <table name = MyTable border=1>
> <tr><td>This is the table</td></tr>
> </table>
>
> I got error "document.MyTab le is null or not an object".
>
> Could anyone help please? Thanks in advance!
>
> Botao[/color]

**Botao** · Jul 23 '05, 01:53 PM

Re: How to select a table clicking a button?--Thanks Yann-Erwan Perio very Much

I'd like to thank Yann-Erwan Perio very much for posting the code
here. That helps a lot. You are a genius! Thanks again for sharing!

Botao

How to select a table clicking a button?

How to select a table clicking a button?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment