[RESOLVED] Copy column to clipboard

@JMRKERApr 27.2010

Is there an HTML tag or CSS tag that will allow only a limited number of column information
within a table to be copied and pasted to the clipboard?

For example, if I have a 5 column table, can I copy X number of rows by dragging the mouse
over the third column of a table?
?

to post a comment

HTML

5 Comments(s) _↴

@brenz_netApr 28.2010 — #Not sure if you can format your content this way, but if you can use divs instead of a table this works:

[CODE]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>brenz.net example</title>
 <style type="text/css">
 .row {background-color:#6699FF; padding:5px;}
 .altrow {background-color:#FF9966; padding:5px;}
 </style>
 </head>
 <body>
 <div style="float:left" class="row">One<br />One<br />One<br /></div>
 <div style="float:left" class="altrow">Two<br />Two<br />Two<br /></div>
 <div style="float:left" class="row">Three<br />Three<br />Three<br /></div>
 <div style="float:left" class="altrow">Four<br />Four<br />Four<br /></div>
 </body>
 </html>
 [/CODE]

@JMRKERauthorApr 28.2010 — #Thank you. I'll give it a try.

Appreciate the information.

?

@JMRKERauthorApr 29.2010 — #Not sure if you can format your content this way, but if you can use divs instead of a table this works:

[CODE]
 // ... see post #2
 [/code]

[/QUOTE]

That was almost what I want to do, but not quite. :eek:

Perhaps the best way to explain it would be sort of like a spreadsheet's abilit

to copy a column OR a row by clicking on a beginning and ending cell locations.

Ideally I would like to be able to copy a range of data from a <table>

or a <div> section set-up like a tabular display.

Is there any such tags in HTML or CSS that will allow me to do that? ?

I thought maybe a <colgroup> tag might work but I have not been successful

with that or finding a similar <rowgroup> tag.

@brenz_netApr 29.2010 — #Well I'm sure there are more elegant ways out there, but this kind of accomplishes what you are trying to do, using an on-page clipboard thing. For some reason, I am using text input fields for the table cells (I think I was originally trying to select the rows or columns but found that I could only select one at a time). If you click on one cell (input), then click on another one in a row or column, it writes all the values in that same row or column to the makeshift clipboard on the page. If it's not a row or column, it doesn't...

The columns will paste nicely into Excel, but for the row (comma delimited), you'll have to paste into a cell, then do a Data - Text to Columns on it.

[CODE]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>brenz.net example</title>
 <script type="text/javascript">
 var itemOne = false;
 function selectItem(myItem) {
 //myItem.select();
 if (!itemOne) {
 itemOne = myItem.id;
 } else {
 var itemOneRow = itemOne.split("-")[0];
 var itemOneCol = itemOne.split("-")[1];
 var str = myItem.id; 
 var myRow = str.split("-")[0];
 var myCol = str.split("-")[1];
 var matchType = false;
 if (itemOneRow==myRow) {
 matchType = myRow;
 } else {
 if (itemOneCol==myCol) {
 matchType = myCol;
 } 
 }
 if (matchType) { // only highlight items this if two picked items are in a row or column
 document.getElementById('myClip').innerHTML = ""; 
 for (var i = 0; i < document.forms['myForm'].length; i++) {
 var thisStr = document.forms['myForm'].elements[i].id;
 var thisItemRow = thisStr.split("-")[0];
 var thisItemCol = thisStr.split("-")[1];
 if (thisItemRow == matchType) {
 //document.forms['myForm'].elements[i].select();
 document.getElementById('myClip').innerHTML += document.forms['myForm'].elements[i].value + ",";
 }
 if (thisItemCol == matchType) {
 //document.forms['myForm'].elements[i].select();
 document.getElementById('myClip').innerHTML += document.forms['myForm'].elements[i].value + "n";
 }
 }
 itemOne = false; 
 } else {
 itemOne = myItem.id;
 document.getElementById('myClip').innerHTML = "";
 }
 }
 
  }
 
  function selectClip() {
   document.getElementById('myClip').select();
  }
 </script>
 <style type="text/css">
 .row {background-color:#6699FF; padding:5px;}
 .altrow {background-color:#FF9966; padding:5px;}
 </style>
 </head>
 <body>
 <form id="myForm">
 <div style="float:left" class="row"><input onclick="selectItem(this);" id="row1-col1" value="Row1Col1" /><br /><input onclick="selectItem(this);" id="row2-col1" value="Row2Col1" /><br /><input onclick="selectItem(this);" id="row3-col1" value="Row3Col1" /></div>
 <div style="float:left" class="altrow"><input onclick="selectItem(this);" id="row1-col2" value="Row1Col2" /><br /><input onclick="selectItem(this);" id="row2-col2" value="Row2Col2" /><br /><input onclick="selectItem(this);" id="row3-col2" value="Row3Col2" /></div>
 <div style="float:left" class="row"><input onclick="selectItem(this);" id="row1-col3" value="Row1Col3" /><br /><input onclick="selectItem(this);" id="row2-col3" value="Row2Col3" /><br /><input onclick="selectItem(this);" id="row3-col3" value="Row3Col3" /></div>
 </form>
 <br style="clear:both;" /><strong>Your Clipboard:</strong><br />
 <textarea id="myClip" rows="15" onFocus="selectClip();"></textarea>
 </body>
 </html>
 [/CODE]

@JMRKERauthorApr 29.2010 — #Thank you 'brenz.net'

I don't mind a bit of cut and paste.

Your solution is a whole lot better than my so called attempts

and I think it will work nicely for my needs.

Thanks for your time and interest.

?

Also in #HTML _↴

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Copy column to clipboard

5 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

[RESOLVED] Copy column to clipboard

5 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #HTML _↴