Jquery函数来改变html标签
[英]Jquery function to change html tags
问题描述
I have a HTML page with 2 textarea , one Input and one Output. 
我有一个HTML页面，包含2个textarea ，一个Input和一个Output。 In the Input textarea will enter the following HTML structure: 在输入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>
Would that by clicking the submit button it converted this formant for this structure in the output textarea: 通过单击提交按钮，它会在输出textarea中为此结构转换此共振峰：
<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>
ie jQuery function should: 即jQuery函数应该：
- replace the
<TABLE>by<UL>用<UL>替换<TABLE><UL> - replace the
<TD>by<LI>用<LI>替换<TD><LI> - remove the tag
<TR>删除标签<TR> - and add
<LABEL>tag the word "TEXT"并添加<LABEL>标记单词“TEXT”
My HTML code looks like this: 我的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>
I'm not able to add the tag inside the textarea . 我无法在textarea添加标签。
2 个解决方案
解决方案1
3 2014-05-26 12:47:26
The simple way is to use contents on the td elements: 简单的方法是在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);
What that does: 那是做什么的：
Gets the appropriate table (I've just used
$("table"), but I'm sure you'll want to make that more specific).获取合适的表（我刚刚使用$("table")，但我确定你想要更具体）。Creates an unordered list.
创建无序列表。 Loops through the
tdelements in the table.循环遍历表中的td元素。For each
tdelement:对于每个td元素：Creates an
li创造一个liCreates a
label创建labelMoves the
.contents()of thetdinto thelabel(contentsincludes text nodes).将td的.contents()移动到label（contents包括文本节点）。Appends the
labelto theli将label贴在liAppends the
lito theul将li附加到ul
Replaces the
tablewith theul.用ul替换table。
This does the same thing, but may be clearer: 这也是一样的，但可能更清楚：
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);
解决方案2
0 已采纳 2014-05-26 13:01:30
How's this? 这个怎么样？
function gerador() {
var code = $('textarea[name=message]').val();
/* prevent the creation of multiple output-blocks if someone clicks on the submit-button more than once */
if ($('#output').length < 1) {
$("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
}
/* replace all the things you want */
code = code.replace(/\<table>/g, "<ul>");
code = code.replace(/\<\/table>/g, "</ul>");
code = code.replace(/\<td>/g, "<li>");
code = code.replace(/\<\/td>/g, "</li>");
code = code.replace(/\<tr>/g, "");
code = code.replace(/\<\/tr>/g, "");
code = code.replace(/\TEXT/g, "<label>TEXT</label>");
/* output the new code */
$('#output').val(code);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.