How to select a table clicking a button?

[Botao]

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='SelctTable'
onClick="document.MyTable.select();">

<table name = MyTable border=1>
<tr><td>This is the table</td></tr>
</table>

I got error "document.MyTable is null or not an object".

Could anyone help please? Thanks in advance!

Botao

 

[Ben Measures]

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='SelctTable'
onClick="document.MyTable.select();">

<table name = MyTable border=1>
<tr><td>This is the table</td></tr>
</table>

I got error "document.MyTable is null or not an object".

Could anyone help please? Thanks in advance!

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.

 

[Yann-Erwan Perio]

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?

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).

I got error "document.MyTable is null or not an object".

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

Could anyone help please? Thanks in advance!

<table id="trainOfThought">
<tr><td>As I Am</td></tr>
<tr><td>This Dying Soul</td></tr>
<tr><td>Endless Sacrifice</td></tr>
<tr><td>Honor Thy Father</td></tr>
<tr><td>Vacant</td></tr>
<tr><td>Stream Of Consciousness</td></tr>
<tr><td>In The Name Of God</td></tr>
</table>

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

DOM : {
getElementWithId : function() {
var func=function(){return Utils.NOT_SUPPORTED;}
if(document.getElementById) {
func=function(id){
return document.getElementById(id);
}
} else if(document.all) {
func=function(id) {
return document.all[id];
}
}
return (this.getElementWithId=func)();
}
},

Ranges : {
create : function() {
var func=function(){return Utils.NOT_SUPPORTED};
if(document.body && document.body.createTextRange) {
func=function(){return document.body.createTextRange();}
} else if(document.createRange) {
func=function(){return document.createRange();}
}
return (this.create=func)();
},
selectNode : function(node, originalRng) {
var func=function(){return Utils.NOT_SUPPORTED;};
var rng=this.create(), method="";
if(rng.moveToElementText) method="moveToElementText";
else if(rng.selectNode) method="selectNode";
if(method)
func=function(node, 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_SUPPORTED};
if(typeof document.selection!="undefined") {
func=function(){
if(document.selection && document.selection.empty) {
return (Utils.Selection.clear=function(){
if(document.selection)
document.selection.empty();
})();
}
}
} else if(window.getSelection) {
var sel=window.getSelection();
if(sel.removeAllRanges) {
func=function(){
window.getSelection().removeAllRanges();
}
}
sel=null;
}
return (this.clear=func)();
},
add : function(originalRng) {
var func=function(){return Utils.NOT_SUPPORTED};
var rng=Utils.Ranges.create();
if(rng.select) {
func=function(rng){rng.select();}
} else if(window.getSelection) {
var sel=window.getSelection();
if(sel.addRange) {
func=function(rng){window.getSelection().addRange(rng);}
}
sel=null;
}
return (this.add=func)(originalRng);
}
}
};

(function() {
var rng=Utils.Ranges.create();
var ele=Utils.DOM.getElementWithId("trainOfThought");
if(rng!=Utils.NOT_SUPPORTED && ele!=Utils.NOT_SUPPORTED) {
document.write(
"<form>"+
"<input type='button' value='Select!' onclick='"+
"Utils.Selection.clear();"+
"Utils.Selection.add("+
"Utils.Ranges.selectNode("+
"Utils.DOM.getElementWithId(\"trainOfThought\")"+
")"+
")"+
"'>"+
"<\/form>"
);
}
})();
</script>


HTH
Yep.

 

[Botao]

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]

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.

There's a misunderstanding, 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]

Yann-Erwan Perio wrote:

var Utils = {
NOT_SUPPORTED : {},

DOM : {
getElementWithId : function() {

^^
I suspect that the outermost function was intended to have an - id -
parameter.

}
return (this.getElementWithId=func)();

<snip> ^^
- and that it should be passed on to the first execution of the inner
function.

Richard.

 

[Yann-Erwan Perio]

I suspect that the outermost function was intended to have an - id -
parameter.

Argh. You suspect well indeed:-(

(Well, you could also see that as a two-step-or-nothing init;-))

- and that it should be passed on to the first execution of the inner
function.

getElementWithId : function(id) {
var func=function(){return Utils.NOT_SUPPORTED;}
if(document.getElementById) {
func=function(id){
return document.getElementById(id);
}
} else if(document.all) {
func=function(id) {
return document.all[id];
}
}
return (this.getElementWithId=func)(id);
}

is now okay. Thanks for the correction.

 

[Botao]

Thank you very much. It works!

I suspect that the outermost function was intended to have an - id -
parameter.

Argh. You suspect well indeed:-(

(Well, you could also see that as a two-step-or-nothing init;-))

- and that it should be passed on to the first execution of the inner
function.

getElementWithId : function(id) {
var func=function(){return Utils.NOT_SUPPORTED;}
if(document.getElementById) {
func=function(id){
return document.getElementById(id);
}
} else if(document.all) {
func=function(id) {
return document.all[id];
}
}
return (this.getElementWithId=func)(id);
}

is now okay. Thanks for the correction.

 

[Botao]

This code deos not work but the originanl works.

I suspect that the outermost function was intended to have an - id -
parameter.

Argh. You suspect well indeed:-(

(Well, you could also see that as a two-step-or-nothing init;-))

- and that it should be passed on to the first execution of the inner
function.

getElementWithId : function(id) {
var func=function(){return Utils.NOT_SUPPORTED;}
if(document.getElementById) {
func=function(id){
return document.getElementById(id);
}
} else if(document.all) {
func=function(id) {
return document.all[id];
}
}
return (this.getElementWithId=func)(id);
}

is now okay. Thanks for the correction.

 

[Botao]

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

I suspect that the outermost function was intended to have an - id -
parameter.

Argh. You suspect well indeed:-(

(Well, you could also see that as a two-step-or-nothing init;-))

- and that it should be passed on to the first execution of the inner
function.

getElementWithId : function(id) {
var func=function(){return Utils.NOT_SUPPORTED;}
if(document.getElementById) {
func=function(id){
return document.getElementById(id);
}
} else if(document.all) {
func=function(id) {
return document.all[id];
}
}
return (this.getElementWithId=func)(id);
}

is now okay. Thanks for the correction.

 

[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?

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="=&gt; Excel/Word" onclick="bar('foo')">
</form>

<script type="text/javascript">
function bar(nodeId) {
var node=document.getElementById(nodeId);
var rng=document.body.createTextRange();
var xl, wd;

//first select
rng.moveToElementText(node);
rng.select();

//then copy
document.execCommand("copy");

//transfer to Excel
xl=new ActiveXObject("Excel.Application");
xl.visible=true;
with(xl.Workbooks.Add().Sheets(1)){
Cells.NumberFormat="@";
Paste();
Cells.NumberFormat="general";
}

//transfer to Word
wd=new ActiveXObject("Word.Application");
wd.visible=true;
wd.Documents.Add().Range().Paste();
}
</script>

 

[Antonie C Malan Snr]

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.getElementById("theTable");
myTable.focus();
}

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

Chris

 

[Botao]

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