• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 235
  • Last Modified:

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

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
Debra11
Asked:
Debra11
  • 10
  • 7
  • 4
  • +1
1 Solution
 
Michael701Commented:
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
 
Debra11Author Commented:
I'll give it a try - researching it right now . . .
0
 
Debra11Author Commented:
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
Technology Partners: 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!

 
Michael701Commented:
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
 
Debra11Author Commented:
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
 
Michael701Commented:
well I still think it could be done with java script and the clipboard, just not with a mouse over selection.
0
 
Michel PlungjanIT ExpertCommented:
0
 
Debra11Author Commented:
mplungian:  I don't see anything in that list that would help me.
0
 
Michel PlungjanIT ExpertCommented:
Create a PDF of the stuff you want to print - including headers and footers
0
 
Debra11Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
They click, you create the pdf, they cut and paste

Or give them a word doc
0
 
Debra11Author Commented:
Thanks.  But I can't use non-proprietary software.

I think we're back to "It can't be done."  Don't you?
0
 
b0lsc0ttCommented:
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
 
Michel PlungjanIT ExpertCommented:
0
 
Michael701Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Debra11Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Debra11Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Debra11Author Commented:
That works!  Thanks so much!
0
 
Debra11Author Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 10
  • 7
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now