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
223 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
  • 10
  • 7
  • 4
  • +1
24 Comments
 
LVL 19

Expert Comment

by:Michael701
Comment Utility
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
Comment Utility
I'll give it a try - researching it right now . . .
0
 

Author Comment

by:Debra11
Comment Utility
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
 
LVL 19

Expert Comment

by:Michael701
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
0
 

Author Comment

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

Expert Comment

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

Author Comment

by:Debra11
Comment Utility
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
Comment Utility
They click, you create the pdf, they cut and paste

Or give them a word doc
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:Debra11
Comment Utility
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
Comment Utility
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
Comment Utility
0
 
LVL 19

Expert Comment

by:Michael701
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
That works!  Thanks so much!
0
 

Author Closing Comment

by:Debra11
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to count occurrences of each item in an array.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now