Jquery function to change html tags

Question

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:

replace the <TABLE> by <UL>
replace the <TD> by <LI>
remove the tag <TR>
and add <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('&lt;label&gt; &lt;label &#47; &gt;');
            }
        </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.

T.J. Crowder · Accepted Answer · 2014-05-26 12:47:26Z

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);

Live example

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:
1. Creates an li
2. Creates a label
3. Moves the .contents() of the td into the label (contents includes text nodes).
4. Appends the label to the li
5. 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);

Live copy

Niffler · Accepted Answer · 2014-05-26 13:01:30Z

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);
}

Collectives™ on Stack Overflow

Jquery function to change html tags

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related