猿问

使用 Javascript 在 textarea 中显示表格代码

我想在页面加载时在 textarea 中显示表格代码。我的以下代码为我执行此操作，但我希望我显示的代码必须具有开始和结束表格标记。请告诉我该怎么做！


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>


慕妹3242003
浏览 225回答 3
3回答

largeQ

您可以parentNode像这样简单地获取表的：elem.parentNode然后它将为您提供整个表格 HTML 代码，因为您指向它的父级并获取它的innerHTML.所以你的最终代码应该是这样的：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 {&nbsp; border: 1px solid black;&nbsp; border-collapse: collapse;}<html><head></head><body>&nbsp; <center>&nbsp; &nbsp; <table id="myTable">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Company</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Contact</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Country</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Alfreds Futterkiste</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Maria Anders</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Germany</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Centro comercial Moctezuma</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Francisco Chang</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Mexico</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; </center>&nbsp; <br>&nbsp; <center>&nbsp; &nbsp; <b>Your Table Code:</b><br>&nbsp; &nbsp; <textarea cols="50" id="showTableCode" rows="10"></textarea>&nbsp; </center></body></html>或者通过一种更简单的方法，您可以使用outerHTML而不是来执行此操作innerHTML。它也提供了你想要的块的父包装元素。所以整个事情将是这样的：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 {&nbsp; border: 1px solid black;&nbsp; border-collapse: collapse;}<html><head></head><body>&nbsp; <center>&nbsp; &nbsp; <table id="myTable">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Company</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Contact</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Country</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Alfreds Futterkiste</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Maria Anders</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Germany</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Centro comercial Moctezuma</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Francisco Chang</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Mexico</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; </center>&nbsp; <br>&nbsp; <center>&nbsp; &nbsp; <b>Your Table Code:</b><br>&nbsp; &nbsp; <textarea cols="50" id="showTableCode" rows="10"></textarea>&nbsp; </center></body></html>
0

四季花海

您可以使用outerHTML而不是innerHTML：elem = document.getElementById("myTable");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var targetId = "_hiddenCopyText_";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var origSelectionStart, origSelectionEnd;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target = elem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; origSelectionStart = elem.selectionStart;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; origSelectionEnd = elem.selectionEnd;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("showTableCode").value=elem.outerHTML.replaceAll("<tbody>", '').replaceAll("</tbody>", '').replace(/(\r\n|\r|\n){2,}/g, '\n');
0

慕仙森

你的意思是这样的：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&nbsp;function format(html) {&nbsp; var tab = '&nbsp; ';&nbsp; var result = '';&nbsp; var indent = '';&nbsp; html.split(/>\s*</).forEach(function(element) {&nbsp; &nbsp; if (element !== "tbody") {&nbsp; &nbsp; &nbsp; if (element.match(/^\/\w/)) {&nbsp; &nbsp; &nbsp; &nbsp; indent = indent.substring(tab.length);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; result += indent + '<' + element + '>\r\n';&nbsp; &nbsp; &nbsp; if (element.match(/^<?\w[^>]*[^\/]$/)) {&nbsp; &nbsp; &nbsp; &nbsp; indent += tab;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });&nbsp; return result.substring(1, result.length - 3);}area.value = format(table.outerHTML);table,th,td {&nbsp; border: 1px solid black;&nbsp; border-collapse: collapse;}<html><head></head><body>&nbsp; <center>&nbsp; &nbsp; <table id="myTable">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Company</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Contact</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Country</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Alfreds Futterkiste</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Maria Anders</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Germany</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Centro comercial Moctezuma</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Francisco Chang</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Mexico</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; </center>&nbsp; <br>&nbsp; <center><b>Your Table Code:</b><br>&nbsp; &nbsp; <textarea cols="50" id="showTableCode" rows="10"></textarea></center></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答