By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,209 Members | 1,100 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,209 IT Pros & Developers. It's quick & easy.

How to select a table clicking a button?

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
Botao wrote:
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.

--
Ben M.
Jul 23 '05 #2

P: n/a
Botao wrote:
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

<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html#getEl>
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.
Jul 23 '05 #3

P: n/a
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
Jul 23 '05 #4

P: n/a
Botao wrote:
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.
Jul 23 '05 #5

P: n/a
Yann-Erwan Perio wrote:
<snip>
var Utils = {
NOT_SUPPORTED : {},

DOM : {
getElementWithId : function() { ^^
I suspect that the outermost function was intended to have an - id -
parameter.

<snip> }
return (this.getElementWithId=func)();

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

Richard.
Jul 23 '05 #6

P: n/a
Richard Cornford wrote:
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.
Jul 23 '05 #7

P: n/a
"Botao" wrote in message
news:ff*************************@posting.google.co m...
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.


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

Look up moveToElementText. All you do is give it an object

reference to the table in the form of document.getElementById("tableID")

Brett





Jul 23 '05 #8

P: n/a
Thank you very much. It works!

Yann-Erwan Perio <y-*******@em-lyon.com> wrote in message news:<41***********************@news.free.fr>...
Richard Cornford wrote:
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.

Jul 23 '05 #9

P: n/a
This code deos not work but the originanl works.
return (this.getElementWithId=func)(id);<<<<

Yann-Erwan Perio <y-*******@em-lyon.com> wrote in message news:<41***********************@news.free.fr>... Richard Cornford wrote:
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.

Jul 23 '05 #10

P: n/a
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-*******@em-lyon.com> wrote in message news:<41***********************@news.free.fr>...
Richard Cornford wrote:
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.

Jul 23 '05 #11

P: n/a
Botao wrote:
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>
Jul 23 '05 #12

P: n/a
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 wrote:
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


Jul 23 '05 #13

P: n/a
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
Jul 23 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.