Question

我正在使用this article为用户创建一种在单个条目表单中输入多行的方法。作者正在做的事情和我正在做的事情的不同之处在于我将我的字段放入表中。我遇到的问题是我没有将新行插入到我的表中。我的猜测是脚本没有找到#editorRows但是因为我还在学习jQuery，所以我不是百分百肯定。

我的HTML仅显示相关部分

<fieldset>
    <legend>Request Details</legend>
    <table>
        <tbody id="editorRows">
            <tr><th>Date</th><th>Time</th><th>Hours Requested</th><th>Request Type</th><th></th></tr>
            <tr class="editorRow">
                <td>...</td>
                <td>...</td>
                <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
            </tr>

        </tbody>
    </table>

    <p><a href="/LeaveRequest/BlankRequestedDayRow" id="addItem">Add Day</a></p>
</fieldset>

我的jQuery代码：

<script type="text/javascript">
    $(document).ready(function() {
        $("#addItem").click(function() {
            $.ajax({
                url: this.href,
                cache: false,
                success: function(html) { $("#editorRows").append(html); }
            });
            return false;
        });
        $("a.deleteRow").live("click", function() {
            $(this).parents("tr.editorRow:first").remove();
            return false;
        });
    });
</script>

正在调用/ LeaveRequest / BlankRequestedDayRow中的代码，所以我的猜测是代码不知道放在哪里。 BlankRequestedDayRow添加：

            <tr class="editorRow">
                <td>...</td>
                <td>...</td>
                <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
            </tr>

按要求填写BlankRequestedDay的完整代码：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EmployeePayroll.ViewModels.LeaveRequestRow>" %>
<%@ Import Namespace="EmployeePayroll.Helpers"%>

<tr class="editorRow">
    <% using (Html.BeginCollectionItem("requestedDays"))
       { %>
        <td><%= Html.HiddenFor(model => model.DaysRequested.RequestId) %><%= Html.EditorFor(model => model.DaysRequested.DateOfLeave.Date)%></td>
        <td><%= Html.EditorFor(model => model.DaysRequested.DateOfLeave.TimeOfDay)%></td>
        <td><%= Html.TextBoxFor(model => model.DaysRequested.HoursRequested, new { size = 6 })%></td>
        <td><%= Html.DropDownListFor(model => model.DaysRequested.RequestType, 
            new SelectList(Model.LeaveRequestType, "Value", "Text", Model.DaysRequested.RequestType), "(Select)")%></td>
        <td><a href="#" class="deleteRow"><img src="../../images/site_icons/16/69.png" title="Delete" alt="Delete" border="0" /></a></td>
    <% } %>
</tr>

Answer 1

与你对$("a.deleteRow").live("click", function())一样，你可能也必须对$("#addItem").click(function() {})部分做同样的事情，即

 $("#addItem").live('click', function() {

可能值得一试......我可能不会如此，因为我没有测试过，但肯定是可能的。

另外，看一下使用：

$('#editorRows tr:last').after(html);

作为替代方案。另外，最后一个沟，把一个id放在桌子上，然后在桌子上尝试以上所有，而不是tbody。

[edit] - 如果您没有行，则除非您自己指定了行，否则不会有tbody。在存在现有行的情况下，tbody只会自动附加到DOM。

Answer 2

您是否检查过您是否是ajax调用返回的内容？

使用firefox，您可以使用firebug的控制台来检查呼叫。

Answer 3

我遇到的问题是在控制器中调用我的动作后返回了一个错误。我正在返回错误的对象类型。修好之后，它起作用了。谢谢大家让我走上正轨！

为什么我的行没有添加到我的表中？

3 个答案: