Copy / paste rows in table javascript
ss123
Status: Curious
Joined: 31 Mar 2005
Posts: 7
Reply Quote
Hi:

My page has table which has bunch of rows and columns. I would like to copy the selected rows into clipboard and paste them in another page. My html is as follows:

<table width="100%" id="table1" class="xTable">
<thead>
<tr valign="top" class="xHeader">
<td nowrap align="center" class="xHeaderCol xCheckCol">
<button type="button" onclick="javascript:xTableSelectAll('sel');xTableSelectionChange('sel');return false;" title="Select All" alt="Select All"><img src="al.gif" height="11" width="13" border="0" title="Select All" alt="Select All"></button>
</td>
<td nowrap>AAA&nbsp</td>
<td nowrap>B&nbsp</td>
</tr>
</thead>
<tbody>
<tr valign="top" class="evenRow" id="row_0">
<td valign="middle" align="center" class="HeaderCol CheckCol"><input type='checkbox' onclick="javascript:test()" id="sel" name="sel" value="0" alt="Select Row" title="Select Row" checked>
</td>
<td valign="middle" class="nonWrappingCell FirstRow">JW051451</td>
<td valign="middle" class="nonWrappingCell xisFirstRow">005-145-001</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

How is this accomplished? Can somebody share an example.

Thanks
Sandya
Back to top
techAdmin
Status: Site Admin
Joined: 26 Sep 2003
Posts: 4127
Location: East Coast, West Coast? I know it's one of them.
Reply Quote
ss123, please be more precise in your question. If this has something to do with programming, what programming language for example are you talking about? What do you mean when you say you want to copy something onto your clipboard? Hopefully you're not actually asking how to simply copy and paste something from one html file to another html file on an html editor, which is what your words actually say.

If you are asking about something that is supposed to be programmed in, you have to give details, not just ask a general question of how to do something that nobody can know what is since you havent' given the necessary details.

When you ask 'how is this accomplished', you have to have explicitly stated what 'this' is referring to before the question can be answered.
Back to top
ss123
Status: Curious
Joined: 31 Mar 2005
Posts: 7
Reply Quote
I am sorry for not being clear at all.

I have a table in my jsp page which has rows and columns. Each row has a checkbox as well. I want to programatically copy the data from the selected rows to a clipboard (mimic ctrl+C) and should be able to paste to another page.

I am able to get the index of the selected row and the row data. Now I am not able to copy it to a buffer (or a clipboard) so that i can do a paste in another page.

I am using javascript.

I am looking for some examples to do the copy and paste feature.

Hope i am clear this time
Thanks
Back to top
techAdmin
Status: Site Admin
Joined: 26 Sep 2003
Posts: 4127
Location: East Coast, West Coast? I know it's one of them.
Reply Quote
:: Quote ::
I am using javascript.

More accuratingly, you thought you could use JavaScript, but you can't, at least not the way you think.

Maintaininging State in HTTP between pages: Cookies; Get, Post
Generally when you want to pass data to another page you would use query strings or cookies. Well, not generally, there are only three ways to do it, either setting a get query string on the next page url and then extracting that data from the query string, or setting a post piece of data in a form and retrieving it on the next page, or a setting a cookie that contains the desired data.

The only way you can preserve data between pages is by using query strings or cookies or post data, the javascript is 100% reloaded on every new page view, the browser can only get data from the last page through either a cookie or a query string get parameter value. There is exactly 0, that's zero, ability to maintain state with javascript, or any other script in the http protocol, that's why HTTP is known as a 'stateless protocol', it does not preserve state between http requests, for example between one page of a site and another. State can only be maintained by get, post, or cookies. There is no way around this, nor should there be, it's how the internet runs.

However, if you're submitting a page to another page, you're much better off using a server side scripting language to handle this, through sessions, that will always work, it doesn't depend on js. As noted, we do not support jsp here, so that's as far as we'll go in that area.

What happens to my Javascript when I load a new page?
When you load the page, the page's javascript, and its data, sit in the browser memory. When you load a new page, that javascript is completely shut down, no state is retained. If you didn't set a cookie, get, or post parameter with the data, the data is gone.

The limitations of Javascript
Javascript lives inside a very protected environment, it has no access to system tools outside of the application running it, usually the browser. So you can't put something onto the Windows clipboard, for example, then call it on another page. This is why you couldn't find anything on this, it can't be done.

You have to use cookies, query strings, or post form fields. Javascript has always been very protected like this to keep people from misusing it. Js has no access to your filesystem, your clipboard, or pretty much any other standard windows feature. It has access to what your browser is programmed to let it have access to, which is just what is allowed by the javascript engine of the browser. And that's not very much.

And the user can turn it off at any time, which reduces the utility of js even further, that's why I tend to avoid it if at all possible.

Use server side session variables
In your case, if you need the data to be available on different pages, not necessarily a single one, you probably want to use sessions, which I assume JSP has built in support for like any other scripting language, which are usually easier to implement server side than through js, although you can do it with js if you absolutely think you need to.
Back to top
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
Actually, there is a way to do it, though it would take a lot of tweaking:

:: Code ::
textRange.execCommand("Copy");

will copy a selected area, so you'd need to have the selection of the checkbox first select the area, then copy it to the clipboard.

I haven't tested this, but it could at least theoretically work. This one comes from devshed.

:: Code ::
function copy()
{
document.form.area.select();
document.form.area.focus();
textRange = document.getElementById(id).createTextRange();
textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");
alert("code copied to your clipboard.\nopen your editor and \npaste it in.");
}

I don't think this would work for more than one item at a time, total, but there it is, you can write to the clipboard.

However, this is

:: Quote ::
an Internet Explorer-only statement that allows the browser to execute a command, thus the name. In this case, we're executing a copy. [src]

So it's not going to do you much good in terms of cross browser compatibility. There's another tutorial here.

Read the MSDN junk here.

Why am I not surprised that IE would give you access to system level functions from within the supposedly protected browser environment? No wonder MSIE has so many security problems, that's just amazing.

Good try TechAdmin,... LOL... you missed that one, though I don't blame you for not keeping up with all that proprietary MSIE garbage to be honest.

However, I will bet dollars to cents that the original poster would never get this working, so it's no big deal.
Back to top
Display posts from previous:   

All times are GMT - 8 Hours