Showing table code in textarea by using Javascript

Question

I want show the table code in textarea when page loads. My following code doing that for me but I want my showed code must have opening and closing table tag. Please tell me how I can do that!

var elem = document.getElementById("myTable");

            var targetId = "_hiddenCopyText_";
            var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
            var origSelectionStart, origSelectionEnd;
                            target = elem;
                origSelectionStart = elem.selectionStart;
                origSelectionEnd = elem.selectionEnd;
            
         document.getElementById("showTableCode").value=elem.innerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<html>
<head>
</head>
<body onload="myFunction()">

<center>
<table id="myTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table></center>

<br>

<center><b>Your Table Code:</b><br>
<textarea cols="50" id="showTableCode" rows="10">
</textarea></center>


</body>
</html>

SMAKSS · Accepted Answer · 2020-09-06T08:58:14.243

You can simply get the parentNode of the table like this:

elem.parentNode

Then it will provide the whole table HTML code for you since you pointing to its parent and getting its innerHTML.

So your final code should be something like this:

var elem = document.getElementById("myTable");

var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;

document.getElementById("showTableCode").value = elem.parentNode.innerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<html>

<head>
</head>

<body>

  <center>
    <table id="myTable">
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
    </table>
  </center>

  <br>

  <center>
    <b>Your Table Code:</b><br>
    <textarea cols="50" id="showTableCode" rows="10"></textarea>
  </center>


</body>

</html>

Or by a simpler approach, you can do this with outerHTML instead of innerHTML. Which provides the parent wrapping element of your desirable block also.

So the whole thing will be something like this:

var elem = document.getElementById("myTable");

var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;

document.getElementById("showTableCode").value = elem.outerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<html>

<head>
</head>

<body>

  <center>
    <table id="myTable">
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
    </table>
  </center>

  <br>

  <center>
    <b>Your Table Code:</b><br>
    <textarea cols="50" id="showTableCode" rows="10"></textarea>
  </center>


</body>

</html>

Dude your 1st snippet is wrong please check here https://jsfiddle.net/tsoe4dLj/ — , Sep 07 '20 at 11:03

score 0 · Answer 2 · answered Sep 06 '20 at 08:53

You can use outerHTML instead of innerHTML:

elem = document.getElementById("myTable");

            var targetId = "_hiddenCopyText_";
            var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
            var origSelectionStart, origSelectionEnd;
                            target = elem;
                origSelectionStart = elem.selectionStart;
                origSelectionEnd = elem.selectionEnd;
            
         document.getElementById("showTableCode").value=elem.outerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');

score 0 · Answer 3 · 2020-09-06T09:05:30.483

Do you mean something like this:

var table = document.getElementById("myTable");
let area = document.getElementById("showTableCode");
// For the origins of the format function please check this SO question https://stackoverflow.com/questions/3913355/how-to-format-tidy-beautify-in-javascript/3966736 
function format(html) {
  var tab = '  ';
  var result = '';
  var indent = '';

  html.split(/>\s*</).forEach(function(element) {
    if (element !== "tbody") {
      if (element.match(/^\/\w/)) {
        indent = indent.substring(tab.length);
      }

      result += indent + '<' + element + '>\r\n';

      if (element.match(/^<?\w[^>]*[^\/]$/)) {
        indent += tab;
      }
    }

  });

  return result.substring(1, result.length - 3);
}

area.value = format(table.outerHTML);

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<html>

<head>
</head>

<body>

  <center>
    <table id="myTable">
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
    </table>
  </center>

  <br>

  <center><b>Your Table Code:</b><br>
    <textarea cols="50" id="showTableCode" rows="10">
</textarea></center>


</body>

</html>

Showing table code in textarea by using Javascript

3 Answers3