Question

我正在尝试使用jQuery动态添加表。在这里，我使用$('#ss').text('txt')在按钮的单击事件（查看预算）上动态添加表。为什么不起作用？

<!DOCTYPE html>
<html>
    <head>
        <title>Money Management</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
        <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
        <SCRIPT language="javascript" src="final.js"></SCRIPT>
        <SCRIPT language="javascript" src="validation3.js"></SCRIPT>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
        <SCRIPT language="javascript">
        function tree()
        {
            alert("hello");
            var txt="";
            var myTable="";
            txt+="<table id='myTable' border='5'>";
            txt+="<tr>";
            txt+="<th>"Hello"</th>";
            txt+="<th>"Hello"</th>";
            txt+="</tr>";
            txt+="</table>";
            //$('#aa').tex('Hello World');
            $('#ss').text('txt');
            //document.getElementById('ss').innerHTML = "Hello World";
            //$('body').append('<table id="myTable"><tr>Hello</tr></table>');
        }
        </SCRIPT>
    </head>
    <body>
        <div id="viewT" data-role="page" data-theme="b">
            <div id="header" data-role="header">
                <h1>Monthly Budget sheet</h1>
            </div>
            <div id="content" data-role="content">
                <div id="TableV" data-role="fieldcontain">
                    <form name="budgetSheet" method="post">
                        <table>
                            <tr>
                                <td><label for="mchoose">Select Month</label></td>
                                <td><select id="mchoose" name="mchoose">
                                    <option value="" selected="selected">Select</option>
                                    <option value="January">January</option>
                                    <option value="Febraruary">Febrarury</option>
                                    <option value="March">March</option>
                                    <option value="April">April</option>
                                    <option value="May">May</option>
                                    <option value="June">June</option>
                                    <option value="July">July</option>
                                    <option value="August">August</option>
                                    <option value="September">September</option>
                                    <option value="October">October</option>
                                    <option value="November">November</option>
                                    <option value="December">December</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td><label for="Yview">Enter Desired Year</label></td>
                                <td><input id=Yview type="text" placeholder="Enter in YYYY format"/></td>
                            </tr>
                            <tr>
                                <td><label for="Uview">Select View Type</label></td>
                                <td><select id="Uview" >
                                    <option value="select">Select</option>
                                    <option value="expenses5">Expenses per Month</option>
                                    <option value="category5">Category Expenses per Month</option>
                                </select></td>
                            </tr>
                            <tr>
                            <td><input
                                 type="button"
                                 data-role="button"
                                 id="click"
                                 value="View Budget"
                                 onclick="$( tree );"></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div id="ss"></div>
        </div>
    </body>
</html>

Answer 1

乍一看，您似乎想要.html()而不是.text()

$('#ss').html(txt);

你的tree（）函数也有错误。

此：

txt+="<th>"Hello"</th>";
txt+="<th>"Hello"</th>";

您应该将内容视为字符串的一部分。：

txt+="<th>Hello</th>";
txt+="<th>Hello</th>";

<强>更新

而不是使用onclick只需使用jQuery连接点击处理程序：

$("input.viewBudget").click(tree);

注意：我在您的按钮中添加了一类viewBudget。

<input type="button" data-role="button" id="click" class="viewBudget" value="View Budget"/>

如果您 必须使用 onclick，您只需要提供带有函数名称的onclick，如下所示：

<input class="viewBudget" type="button" data-role="button" id="click" value="View Budget" onclick="tree();">

但是请注意，函数不能在ready()函数内声明，否则你会遇到一些范围问题。

此外：

。我希望它应该取代它我尽快将div标记在表格中单击按钮

如果您想完全删除<div id="ss"></div>，可以使用replaceWith()

 $('#ss').replaceWith(txt);

jsfiddle上的代码示例。

Answer 2

你必须删除引号！

$('#ss').text(txt);

但我认为你想要达到这个结果：

$('#ss').html(txt);

jQuery动态添加表

2 个答案: