CODEWITHSUNDEEP
javascriptjqueryhtml
pegoj
pegoj

Reputation: 67

Jquery function to change html tags

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:

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.

Upvotes: 1

Views: 466

Answers (2)

Niffler
Niffler

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

T.J. Crowder
T.J. Crowder

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

Live example

What that does:

  1. Gets the appropriate table (I've just used $("table"), but I'm sure you'll want to make that more specific).

  2. Creates an unordered list.

  3. Loops through the td elements in the table.

  4. 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

  5. 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

Upvotes: 3

Related Questions