我想在页面加载时在 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>
3 回答
largeQ
TA贡献2039条经验 获得超7个赞
您可以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 {
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>
或者通过一种更简单的方法，您可以使用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 {
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>
四季花海
TA贡献1811条经验 获得超5个赞
您可以使用outerHTML而不是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');
慕仙森
TA贡献1827条经验 获得超7个赞
你的意思是这样的：
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>
添加回答
举报
0/150
提交
取消