0

我一直在尝试学习 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 调试器错误消息是"Uncaught TypeError: object is not a function"。这仅在我开始添加表格行标签时发生。

编辑：

原来我本地的 jQuery 库的行为很奇怪，也许是我不小心修改了它？一旦我引用了谷歌托管库，它就起作用了

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

3 回答 3

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。

于 2012-08-10T09:26:50.497 回答
0

好吧，试着写

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

代替

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
于 2012-08-10T09:25:56.313 回答
0

Onclick 有些在 Chrome 中并不总是有效，所以这样做。
试试这个代码 查看演示

$("#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" />
于 2012-08-10T09:30:46.037 回答