Question

我一直在尝试学习JQuery，而这本教程从一本书中吸引了我。我已经简化了一些，所以我们正在处理最简单的元素/功能。我已经定义了这个表

<table id ="testtable">
<thead>
<th>Client Name</th>
<th>Appointment Dates</th>
</thead>
    <tbody id="tabledata">
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <!--@Html.Action("AppointmentData", new { id = Model })-->
    </tbody>
</table>

我有一个按钮，调用定义为

的函数

<input type="button" value="test" onclick="OnSuccess();" />

我的实际Jquery在这里

<script type="text/javascript">
function OnSuccess() {
        $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
    }
</script>

令我感到困惑的是Jquery函数无法执行。我可以用.empty（）清空表，我甚至可以执行此操作：

$("#tabledata").append("<td>hello</td><td>world</td>")

它会附加数据，但我不能为我的生活弄清楚为什么它不会追加一行。我得到的Chrome调试器错误消息是“未捕获的TypeError：对象不是函数”。这只发生在我开始添加表行标记时。

修改

事实证明我的本地jQuery库表现得很奇怪，也许我偶然修改了它？我一引用google托管库就可以了

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {
    $('input[name="testButton"]').click(function () {
        alert('hi');
        $("#testtable tbody").append("<tr><td>hello</td><td>world</td></tr>");
    });
}); 
</script>

Answer 1

<td> s（单元格）必须包含在<tr>（行）中：

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");

有些浏览器会为您执行此操作，但无论如何都应该明确地将它们包装起来。

如果你正在使用jQuery，你应该真正绑定你的事件而不是使用内联处理程序。例如，给你的按钮命名并在JS中引用它：

<input type="button" value="test" name="testButton" />

JavaScript的：

$(document).ready(function() {
    $('input[name="testButton"]').click(function() {
        $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
    });
});

通过在匿名函数中放置alert()来确保正在执行处理程序。还要确保在$(document).ready()函数中执行jQuery。通过在开发人员控制台中键入$，确保实际包含jQuery。它不应该返回undefined。

Answer 2

好的，试着写一下

$(tabledata).append("<tr><td>hello</td><td>world</td></tr>");

而不是

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");

Answer 3

Onclick有些并不总是适用于Chrome，所以这样做。
试试这个代码 See demo

$("#AddRow").click(function() {
    $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
})

<table id ="testtable" border="1">
<thead>
<th>Client Name</th>
<th>Appointment Dates</th>
</thead>
    <tbody id="tabledata">
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <!--@Html.Action("AppointmentData", new { id = Model })-->
    </tbody>
</table>

<input type="button" value="test" id="AddRow" />

Jquery - 向表中添加其他表行

3 个答案: