我有一个带有 2 textarea 的 HTML 页面，一个输入和一个输出。在输入 textarea将进入以下 HTML 结构:
<table>
<tr>
<td>TEXT: <input type="text" value="" /></td>
</tr>
<tr>
<td>TEXT: <input type="text" value="" /></td>
</tr>
<tr>
<td>TEXT: <input type="text" value="" /></td>
</tr>
</table>
是否会通过单击提交按钮将此共振峰转换为输出文本区域中的此结构:
<ul>
<li>
<label>TEXT:<label>
<input type="text" value="" />
</li>
<li>
<label>TEXT:<label>
<input type="text" value="" />
</li>
<li>
<label>TEXT:<label>
<input type="text" value="" />
</li>
</ul>
即jQuery 函数应该:
- 替换
<TABLE>通过<UL> - 替换
<TD>通过<LI> - 删除标签
<TR> - 并添加
<LABEL>标记“TEXT”这个词
我的 HTML 代码如下所示:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Beta style</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
function gerador() {
var code = $('textarea[name=message]').val(); //Pega código do input
alert(code);
//$("body").append("<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>");//Cria campo Output
$('#output').val(code); //Escreve codigo no Output
$('#output:contains("TEXT")').wrapInner('<label> <label / >');
}
</script>
</head>
<body>
<h2>Input</h2>
<textarea name="message" id="input" rows="10" cols="100"></textarea>
<input type="button" value="Submit" onclick="gerador();" />
</body>
</html>
我无法在 textarea 中添加标签.
最佳答案
简单的方法是在 td 元素上使用 contents:
var table = $("table"); // Limit this as appropriate
var ul = $("<ul>");
table.find("td").each(function() {
ul.append($("<li>").append($("<label>").append($(this).contents())));
});
table.replaceWith(ul);
它的作用:
获取适当的表格(我刚刚使用了
$("table")，但我相信您会想要使其更具体)。创建无序列表。
遍历表中的
td元素。对于每个
td元素:创建一个
li创建一个
标签将
td的.contents()移动到label中(contents包括文本节点)。将
label附加到li将
li附加到ul
用
ul替换table。
这做同样的事情，但可能更清楚:
var table = $("table"); // Limit this as appropriate
var ul = $("<ul>");
table.find("td").each(function() {
var li = $("<li>");
var label = $("<label>");
label.append($(this).contents());
li.append(label);
ul.append(li);
});
table.replaceWith(ul);
关于javascript - jquery函数改变html标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23870445/