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

Question

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

我的代码：

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"中，我试图从"星期一"单元格中获取数据，但它总是"未定义"的......

有人有想法吗？

我只想获取所有天的所有数据以传递它，然后在 Ajax"POST"函数中将其写入数据库。

Answer 1

你必须改变这一行

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

到

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

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

此外，您必须更改

var mon = div.val();

到

var mon = div.text();

或

var mon = div.html();

由于<div>元素没有价值，您可以使用val()获得。