Reputation: 67
I have a HTML page with 2 textarea
, one Input and one Output. In the Input textarea
will enter the following HTML structure:
<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:
<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>
i.e. jQuery function should:
<TABLE>
by <UL>
<TD>
by <LI>
<TR>
<LABEL>
tag the word "TEXT"My HTML code looks like this:
<!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
.
Upvotes: 1
Views: 466
Reputation: 1710
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);
}
Upvotes: 0
Reputation: 1075925
The simple way is to use contents
on the td
elements:
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).
Creates an unordered list.
Loops through the td
elements in the table.
For each td
element:
Creates an li
Creates a label
Moves the .contents()
of the td
into the label
(contents
includes text nodes).
Appends the label
to the li
Appends the li
to the ul
Replaces the table
with the ul
.
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);
Upvotes: 3