Modifying html and opening it in a popup window

Question

Here is what I'm trying to accomplish:

Grab some html from the current page
Prepare the new html content (for example replacing all tr with ul and all td with li)
Open the newly-constructed html in a pop up window (window.open)
Make sure the existing html on the page remains the same

The main purpose is to create a more print-friendly window out of existing content and automatically trigger the browser print button.

Here is what I have done so far. Is there an alternative way of writing this in jQuery that enables me to target certain elements/classes/IDs instead of just replacing the tags with some other tags?

<script>
$('#print-it').on('click', function(){
  var w = window.open('','','width=1100, height=600, scrollbars=1');
  var content = $('.my-div').html();

  content = content.replace('table', 'div');
  content = content.replace('thead', 'div');
  content = content.replace('tbody', 'div');
  content = content.replace('tr', 'ul');
  content = content.replace('td', 'li');

  var html = '<div class="popup">' + content + '</div>';
  w.document.write(html);
  w.document.close();
  w.focus();
  w.print();
  return false;
});
</script>

<div class="my-div">
  <table class="my-table">
    <thead>
      <tr>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tr>
              <td>Data</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<a id="print-it" href="#">Print Me</a>

you probably want to take a look at this http://stackoverflow.com/questions/9399354/how-to-open-a-new-window-and-insert-html-into-it-using-jquery — Eugene Hauptmann, Feb 03 '16 at 21:42
Thanks, but I know how to insert html into a pop up window. My question is different. I'm having issue with constructing the new html. I modified the question to be more clear. — farjam, Feb 03 '16 at 21:44
@LexLustor, well it depends on your html :) If I have
I'd like to write an article about how to create a **table** in html
? — Gavriel, Feb 03 '16 at 22:11
@Gavriel That's right, my bad, I was really short-sighted, I delete my wrong comment... — Lex Lustor, Feb 03 '16 at 22:13
What you really should be doing is providing a _print stylesheet_ like `` that alters the `display:` styles of table, tr, td, etc. or using `@media print` in your existing CSS. First article I stumbled across: [How To Set Up A Print Style Sheet](https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/) — Stephen P, Feb 03 '16 at 22:33
Also, there's a reason [why you shouldn't be using regex to match [X]HTML tags](http://stackoverflow.com/a/1732454/17300). An XSLT transform is a better approach if you absolutely _must_ alter the HTML. (and only if you've found that it simply can't be done with a print stylesheet) — Stephen P, Feb 03 '16 at 23:37

score 0 · Answer 1 · answered Feb 03 '16 at 22:31

0

I ran your snippet (after adding jQuery and wrapped the script in .ready to make the button fire). The replaces work as written. In the popup there are no table elements (you can see this by commenting out the print then inspecting element on the popup). I don't know what layout you expect, but I think you will need to change your logic or add some CSS to achieve it. An example of the expected layout would make it easier to help.

answered Feb 03 '16 at 22:31

Karl Galvez

843
6
15

Thanks. Yeah, looks like it actually works. I would prefer if I could come up with a better way so I have more control over the html. Maybe doing in more in jQuery with find and replaceWidth so I can target certain classes and elements just the general table tags. – farjam Feb 03 '16 at 22:40
Another possible (and IMO better solution) is to write CSS with using `@media print { STYLES HERE}` This way you don't have to process the html manually. I've done this for a similar problem with pages printing oddly, it worked out rather nicely. – Karl Galvez Feb 03 '16 at 23:44

Modifying html and opening it in a popup window

1 Answers1