Javascript 用于更改html标记的Jquery函数_Javascript_Jquery_Html

Javascript 用于更改html标记的Jquery函数

javascript jquery html

Javascript 用于更改html标记的Jquery函数,javascript,jquery,html,Javascript,Jquery,Html,我有一个HTML页面，有2个textarea，一个输入，一个输出。在输入文本区域中将输入以下HTML结构： <table> <tr> <td>TEXT: <input type="text" value="" /></td> </tr> <tr> <td>TEXT: <input type="text" value="" /><

我有一个HTML页面，有2个

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>


正文：
正文：
正文：

单击submit按钮，它会在输出文本区域转换此结构的共振峰吗：

<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功能应：

将
替换为
将
替换为
移除标签
并添加
标记“文本”

我的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('&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>


贝塔风格
函数gerador（）{
var code=$（'textarea[name=message]'）.val（）；//Pega código do输入
警报（代码）；
//$（“body”）.append（“Output”）；//Cria campo输出
$（“#输出”）.val（代码）；//Escreve codigo无输出
$（'#输出：包含（“文本”））.wrapInner（'label-label/；'）；
}
输入

我无法将标签添加到

文本区域

中。简单的方法是在

td

元素上使用

内容

：

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

这怎么样

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

函数gerador（）{ var code=$（'textarea[name=message]'）。val（）； /*如果有人多次单击“提交”按钮，请防止创建多个输出块*/ 如果（$（'#输出'）。长度<1）{ $（“正文”）.append（'Output'）； } /*更换所有你想要的东西*/ 代码=代码。替换（/\/g，“

”）；代码=代码。替换（/\/g，“”）；代码=代码。替换（/\/g，“

”）；代码=代码。替换（/\/g，“

”）；代码=代码。替换（/\/g，“”）；代码=代码。替换（/\/g，“”）；代码=代码。替换（/\TEXT/g，“TEXT”）； /*输出新代码*/ $（'#output'）.val（代码）； }

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