Solved

How can I design a table that will allow the user to copy and past both the table headers and table data?

Posted on 2009-05-06
24
228 Views
Last Modified: 2012-05-06
I am designing a website for a client who wants to be able to take information from a php based designed website, enter the information into a table onscreen, and then copy and paste it into a Word Document.  I can design the table easily enough, but so far have only been able to either copy and paste the table headers, OR the data within each field.  He wants to copy and paste both the table and data, just exactly the way it looks.  To see an example, go to http://www.StreamDent.com/PostResin.php (Use"test123" for your username and password.) A sample table is located at the top of the 3rd column, "Nitrous Oxide."
0
Comment
Question by:Debra11
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 7
  • 4
  • +1
24 Comments
 
LVL 19

Expert Comment

by:Michael701
ID: 24317552
Well I'm thinking javascript. You could write a function to load the clipboard with the table and current values of the text boxes.

if you google: javascript load clipboard

there are a few options
0
 

Author Comment

by:Debra11
ID: 24317704
I'll give it a try - researching it right now . . .
0
 

Author Comment

by:Debra11
ID: 24378391
Michael701,

I've now tried javascript and a Firefox addon.  It seems the real problem is that my configuration will not allow the user to select both the table headers and the data at the same time.  When you click and drag, it does not grab the inputted data.  I think if I could get it to do that, regular copy and past would work just fine since I can copy the headers OR the data, just not the headers WITH the data.  

Any other suggestions on how to grab it in the first place?  (It cannot be an image - must be text-based.)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:Michael701
ID: 24378599
That's a fundamental issue with the  browser behavior. If you're selecting within a text box the limits are constrained to that item.
0
 

Author Comment

by:Debra11
ID: 24378771
Okay, so, just to be clear, you think it can't be done?  (That's the conclusion I've come to, I just want someone else to say it!)

0
 
LVL 19

Expert Comment

by:Michael701
ID: 24381057
well I still think it could be done with java script and the clipboard, just not with a mouse over selection.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24554063
0
 

Author Comment

by:Debra11
ID: 24567072
mplungian:  I don't see anything in that list that would help me.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24567292
Create a PDF of the stuff you want to print - including headers and footers
0
 

Author Comment

by:Debra11
ID: 24567359
How would that help?  They will input information into the table as they are working on a patient, and then need to copy and paste both the table format, and the newly input data into a proprietary system that works like Word.

A pdf would be for static information only, would it not?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24567615
They click, you create the pdf, they cut and paste

Or give them a word doc
0
 

Author Comment

by:Debra11
ID: 24585558
Thanks.  But I can't use non-proprietary software.

I think we're back to "It can't be done."  Don't you?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24586806
The only way I can think to do it with the limits you have is to create a custom button that will run a Javascript function when clicked.  That function will get the table headers and the input values using Javascript and the DOM.  Most browsers should be able to do this no matter the security settings or configuration.
The next step is harder and will work/not work based on browser and version.  You use Javascript to send the text to the Clipboard.  Now if formatting as a table is key (i.e. you want Word to get the "rich" text and not just the basic text) then you are definitely out of luck.  This method would just send or "copy" text and not be the same as highlighting and copying/pasting directly to Word from the browser (in that case Word usually can copy the table and "html" too).
This would be an option and I can provide details if you'd like to pursue it.  It will not work in all browsers or version and can depend on security settings in some browsers.  If you want something universal then "you can't do it" is the answer given the requirements above.  Let me know if you have a question or how this helps.
bol
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24588321
0
 
LVL 19

Expert Comment

by:Michael701
ID: 24590914
The problem isn't being able to generate the pdf, it's in selecting the html table and text box values with a mouse over.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24591829
Hi

I am not sure what the issue is

I played around with some stuff but the whole thing pastes into work just fine when I select it

Try filling in the fields and doubleclick on the div
It is possible to replace the table content with the field values and put the whole table on the clipboard, but it seems IE does that anyway

<script>
function getRangeNode(win) {
  var node = null;
  if (win.getSelection) { 
    node = win.getSelection().anchorNode.parentNode;
  }
  else if (win.document.selection) {
    var range = win.document.selection.createRange();
    if (range) {  
      node = range.parentElement();
    }
  }
  return node;
}
function copySel() {
 
  var stuff = getRangeNode(window);
  alert(stuff.innerHTML)
 
  var fields = stuff.getElementsByTagName('input');
  
  for (var i=0;i<fields.length;i++) {
    fields[i].parentNode.innerHTML=fields[i].value
  }
  alert(stuff.innerHTML)
  
}
function copyDiv(theDiv) {
  var fields = theDiv.getElementsByTagName('input');
  alert(fields.length)
  for (var i=0;i<fields.length;i++) {
    fields[i].parentNode.innerHTML+=fields[i].value
  }
  alert(theDiv.innerHTML)
 
}
 
</script>
 
 
 
<div class="column_three">
    <div onDblClick="copyDiv(this)">
      
      <table width="95%" border="1">
        <tr>
          <th width="36%" scope="col">Nitrous Oxide:</th>
          <th width="32%" scope="col">Pre-op&nbsp;</th>
          <th width="32%" scope="col">Postop&nbsp;</th>
 
        </tr>
        <tr>
          <th scope="row">Blood Pressure&nbsp;</th>
          <td><input name="" type="text" size="10">&nbsp;</td>
          <td><input name="" type="text" size="10">
            &nbsp;</td>
        </tr>
 
        <tr>
          <th scope="row">Heart Rate</th>
          <td><input name="textfield" type="text" id="textfield" size="10"></td>
          <td><input name="textfield2" type="text" id="textfield2" size="10"></td>
        </tr>
        <tr>
          <th scope="row">Start/stop</th>
          <td><input name="textfield3" type="text" id="textfield3" size="10"></td>
 
          <td><input name="textfield4" type="text" id="textfield4" size="10"></td>
        </tr>
      </table>
    </div>
    <br>
    <br>

Open in new window

0
 

Author Comment

by:Debra11
ID: 24592071
Wow!  Thanks everyone for jumping on this!  Here we go:

bol - your solution seems the most plausible so far.  My users are required to use Firefox (always latest version) as their browser.  I have not been able to find/write a javascript that will load both the table and input values, (it's one or the other), so I would be elated to find out what that would look like. When I have been able to load the "table" using javascript, it copied from the clipboard just fine.  (The proprietary software we are actually pasting into works just like Word, which is why I am using that as an example for you guys - since there is not way you can have (or would even want) the actual software.)

mplungian - are you saying write javascript that would pull the headers, then the data, create an rtf using this generator in possibly something like a text editor, and then copy and past that into "Word?"  That might work - if the generator works - I'll try it.

Michael - you stated the problem perfectly.

mplungian 2nd solution - Tried it and I love how it works, however, it pastes the html - am I missing something?  (I need it to basically look like it does in on the page, although we could live without the lines.)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24593031
If I do NOTHING but select the form WITH the content in IE7 and paste it into word 2003, I get the table WITH the contents (in the form field)

The script COULD put a table with the field contents on the clipboard
0
 

Author Comment

by:Debra11
ID: 24593745
mplungian - I just got it to work in Firefox!  Thanks so much.  I just want to make sure I got it straight--

You double-click inside the div on the page, two script messages appear, you click okay to both.  That puts the inputted data into the html.  Then you can copy and paste normally.  Right?  Finally!

Now, what do you mean, "The script COULD put a table with the field contents on the clipboard?"  If all they had to do was double-click, choose OK a couple of times, and then paste, that would be icing on the cake.

(I can't tell you what a relief it is to finally be moving forward on this issue--thanks, again, so much!)  And thanks to everyone who has helped - I really appreciate you!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24593830
Remove the alerts to not have to click ok

If you are happy with the values inside the html, then great
In my IE I do not have to do any scripting to select, copy and paste into word
0
 

Author Comment

by:Debra11
ID: 24593923
That works!  Thanks so much!
0
 

Author Closing Comment

by:Debra11
ID: 31578507
The only thing I did differently from this was take out the alerts.  Now it works exactly as I'd like.  Thanks so much!
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question