我正在尝试获取用户使用属性 contenteditable="true"
编辑的表格,但我不希望它出现在输出中。
所以为了输出我正在这样做:
$(document).ready(function() {
$("#btn").click(function(){
var text = $("#tab").html(); // taking the content
var res = text.replace('<td contenteditable="true">','<td>'); //trying to replace
document.getElementById("output").innerHTML = res ; //output data
});
});
问题是代码忽略了替换,你知道为什么吗?
==== 编辑:
抱歉大家,我想我根本就不清楚。唯一的问题是输出,而不是 html,我将 html 传递到文本区域给用户副本等。
请看一下这里的代码:https://jsfiddle.net/mnpxwhx6/
当我执行输出时,我不希望 TD 带有可编辑属性。
谢谢
最佳答案
如果正确解释问题,.replace()
没有必要 ?如果你想删除contenteditable
属性位于 td
您可以克隆的元素 #tab
元素使用 .removeAttr()
删除 contenteditable
来自html
的td
设置之前的元素html
的textarea
textarea {
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
var text = $("#tab").clone();
text.find("td[contenteditable]").each(function() {
$(this).removeAttr("contenteditable")
})
document.getElementById("output").innerHTML = text[0].innerHTML;
});
delete text;
});
</script>
</head>
<body>
<div id="tab">
<table border=1>
<thead>
<tr>
<td></td>
<td contenteditable="true">
48-50
</td>
<td contenteditable="true">
50-52
</td>
<td contenteditable="true">
52-54
</td>
</tr>
</thead>
<tbody>
<tr>
<th>medida1</th>
<td contenteditable="true">
104cm
</td>
<td contenteditable="true">
108cm
</td>
<td contenteditable="true">
112cm
</td>
</tr>
<tr>
<th>medida2</th>
<td contenteditable="true">
106cm
</td>
<td contenteditable="true">
110cm
</td>
<td contenteditable="true">
114cm
</td>
</tr>
<tr>
<th>medida3</th>
<td contenteditable="true">
122cm
</td>
<td contenteditable="true">
126cm
</td>
<td contenteditable="true">
130cm
</td>
</tr>
<tr>
<th>medida4</th>
<td contenteditable="true">
69cm
</td>
<td contenteditable="true">
70cm
</td>
<td contenteditable="true">
71cm
</td>
</tr>
<tr>
<th>medida5</th>
<td contenteditable="true">
38cm
</td>
<td contenteditable="true">
40cm
</td>
<td contenteditable="true">
42cm
</td>
</tr>
</tbody>
</table>
</div>
<button id="btn">Show HTML</button>
<hr>
<textarea id="output" rows="4" cols="50">
</textarea>
jsfiddle https://jsfiddle.net/mnpxwhx6/1/
关于javascript - 如何将 HTML 作为字符串传递到 TextArea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36227651/