如何从 jQuery Table 中的每个动态生成的单元格获取数据

Question

我试图从 jQuery table 中动态生成的单元格中获取数据，但总是遇到同样的问题，我的数据是 "undefined"。有人可以帮助我或提供任何建议吗？

我的代码：

function loadWeekData() {

    // Append database data here

    $.ajax({
        type: "GET",
        url: "/Home/JsonWeekEvents",
        dataType: "JSON",
        success: function (result) {
            $.each(result, function (i, val) {
                var trow = $('<tr/>').data("id", val.Id);
                //trow.append('<td>' + val.Id + "&nbsp;" + '</td>');
                trow.append('<td style="padding:5px; width:100px; height:70px"></td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsM" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" id="monVal" class="desc_Num">' + val.Monday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsT" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" class="desc_Num">' + val.Tuesday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsW" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" class="desc_Num">' + val.Wednesday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsTr" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" class="desc_Num">' + val.Thursday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsFr" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" class="desc_Num">' + val.Friday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsSt" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" class="desc_Num">' + val.Saturday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                    '<div class="ui-widget">' +
                    '<input  size="10" maxlength="10" id="tagsSu" class="tags" />' +
                    '<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
                    '<div style="text-align:center" class="desc_Num">' + val.Sunday + '</div >' +
                    '<input type="hidden" class="idEvent" />' +
                    '</div >' +
                    '</td>');
                trow.append('<td  style="padding:2px; width:100px; height:70px"><a href="#" rel="events-week-edit" class="edit">Edit Week</a></td>');
                tab.append(trow);
            });

            $("tr:odd", tab).css('background-color', '#C4C4C4');
            $("#weekEvents").html(tab);
        },
        error: function () {
            alert("Failed! Please try again.");
        }
    });
    var tab = $('<table class=MyTable border=1 ></table>');
    var thead = $('<thead></thead>');

    thead.append('<th style="padding:5px">FSE' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Monday' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Tuesday' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Wednesday' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Thursday' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Friday' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Saturday' + "&nbsp;" + '</th>');
    thead.append('<th style="padding:5px">Sunday' + "&nbsp;" + '</th>');

    tab.append(thead);

    tab.on("focus", ".tags", function (e) {

        //var prefix = $('.tags').val();

        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/GetSearchValue",
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {

                                label: item.Title + ', ' + item.Description, value: item.Title,

                                Id: item.Id,
                                Title: item.Title,
                                Description: item.Description,
                                Location: item.Location
                            }
                        }));
                    },
                    error: function (xhr, status, error) {
                        alert("Error!" + xhr);
                    }
                });

            },
            select: function (event, ui) {
                var field_id = $(this).closest("div").find(".idEvent");
                field_id.val(ui.item.Id);

            }
        });


    });

    tab.on("click", ".addEvent", function (e) {
        var id = $(this).closest("div").find(".idEvent").val();
        var field = $(this).closest("div").find(".desc_Num");
        var select = $(this).closest("div").find(".tags");
        $.ajax({
            type: "GET",
            url: "/Home/AutoEventDetails",
            data: { id: id },
            dataType: "JSON",
            success: function (data) {
                var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
                field.html(res);
                select.val('');
            }


        });
    });

    tab.on("click", ".edit", function (e) {

        var tr = $(this).closest("tr");
        var id = tr.data("id");
        var div = $(this).closest("div").find("monVal");
        var mon = div.val();

        //var mon = $(this).get(".desc_Num").val();
        //var res = $('');
        //res.append(mon);
        //$("#test").html(res);

        alert("ok" + id + mon );
    });
}

在最后一个 "tab.on" 中，我试图从 "monday" 单元格获取数据，但它总是 "undefined"...

有人有想法吗？

我只想获取所有日期的所有数据，然后在 Ajax "POST" 函数中将其写入数据库。

Answer 1

您必须更改此行

 var div = $(this).closest("div").find("monVal");

进入

 var div = $(this).closest("div").find("#monVal");

因为您要查找的 <div> 具有 id monval。

此外你还得改

 var mon = div.val();

进入

 var mon = div.text();

或

 var mon = div.html();

因为 <div> 元素没有您可以用 val().

获得的值

如何从 jQuery Table 中的每个动态生成的单元格获取数据

How to get data from each dynamically generated cell in a jQuery Table

asp.net-mvc

jquery

asp.net-ajax

datatables