Home/ Questions/Q 8481247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T19:30:53+00:00

I have an HTML table element, with rows containing not only plain-text characters, but

  • 0

I have an HTML table element, with rows containing not only plain-text characters, but also radio buttons, lists, etc.

What I would like to have, is when the user copy-pastes the content of the table into MS Excel (as plain text), the radio buttons should be replaced with their values (e.g.: “checked”, and “unchecked”), lists elements should be replaced by their selected value, etc.

Is there a way to implement this in the browser?
(Preferably without using flash or java applet components)

Thanks,
krisy

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use javascript (this will be easier with a framework like jquery) to modify the code that has been copied. The general procedure would be to set the radio buttons to be invisible and then add in text in their place based on their current value.

    There are plenty of questions to help with the implementation details: https://stackoverflow.com/search?q=%5Bjavascript%5D+copied+text&submit=search

    Update: Turns out you don’t even need to remove the radio buttons, at least for my version of excel. Here is a working example (way over-commented to explain what’s going on):

    <!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      .radioCopyVal{
      font-size: 0;
      }
    </style>
  </head>
  <body>
    <form>
      <table>
    <tr>
      <td><input type='radio' name='woots' id='oneWoot' checked/><span class='radioCopyVal'>Checked.</span></td>
      <td><label for='oneWoot'>Woot.</label></td>
    </tr>
    <tr>
      <td><input type='radio' name='woots' id='twoWoot' /><span class='radioCopyVal'>Not checked.</span></td>
      <td><label for='twoWoot'>Woot. Woot.</label></td>
    </tr>
      </table>
    </form>
    <script src="jquery-1.7.2.min.js"></script>
    <script type='text/javascript'>
      $("#oneWoot").attr("checked", true); //on page load, make sure oneWoot is the default selection

      $("input[name=woots]:radio").change(function(){ //anytime the radio buttons of name woots are changed...
          $(".radioCopyVal").remove(); //remove the old radioCopyVal spans (to be replaced with new ones)
          $("input[name=woots]:radio").each(function() { //for each radio button in name woots
              if ($(this).attr("checked")) { //if the button is checked, add a span saying 'Checked.' after it. css is used to hide the span
                  $(this).after('<span class="radioCopyVal">Checked.</span>');
          }else {
              $(this).after('<span class="radioCopyVal">Not checked.</span>');
          }
          })
      });
    </script>
  </body>
</html>
    • 0