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

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.

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.

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

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.

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.

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.

"Botao"  wrote in message
news:ff93a86a.0409150615.c088b71@posting.google.com...
> 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

Thank you very much. It works!

Yann-Erwan Perio <y-e.perio@em-lyon.com> wrote in message news:<414888a2$0$17702$626a14ce@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.

This code deos not work but the originanl works.

>>>return (this.getElementWithId=func)(id);<<<<

Yann-Erwan Perio <y-e.perio@em-lyon.com> wrote in message news:<414888a2$0$17702$626a14ce@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.

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$626a14ce@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.

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>

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

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