我必须创建一个用户可以删除的事件的下拉列表。这些事件是在一个表中进行的,我正在尝试迭代该表,但我觉得我已经快到了。我使用 Bootstrap 3 和 jQuery。我对 jQuery 还是个新手。
这是我用来创建模式窗口的 HTML,因此我可以将控件放在那里:
<div id="delete-activity-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1>Delete Activity</h1>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon" id="add-addon-styling">Choose Activity</span>
<select class="form-control" id="delete-activity-modal-dropdown">
<!-- Options Added via content-controller.js -->
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="Choose the activity from the drop-down menu you want to delete.">
<b>?</b>
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
正如你在上面看到的,这就是我得到的结果。我应该有 6 个结果,它们应该有一个事件 ID 和一个名称,但它们返回时未定义,所以我可能做错了:P
这是我用来制作下拉内容的函数:
function CreateActivityDeleteDropdown() {
var dropdown = $('#delete-activity-modal-dropdown');
$('#activityTable').each(function() {
var activityId = $(this).attr("#activityId");
var activityName = $(this).attr("#activityName");
var dropdownDescription = activityId + " | " + activityName;
var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>';
$(dropdown).append(dropdownElement);
});
}
只有当您按下按钮时才会调用此函数,因此当我执行此操作时该表确实存在。当网站加载时,我需要查看的表格会动态添加,如下所示:
function GetActivityAbstracts() {
$.getJSON(, function (testData) {
var object = $.parseJSON(testData);
var activityTable = '<tbody id="activityTable"></tbody>';
$.each(object, function () {
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td id = "activityId" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td id = "activityName" style = "vertical-align: middle;">'
+ activityName + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
activityTable += tableElement;
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
结果:
一些 JSON 示例数据:
"{\"1\":{\"ActivityId\":1,\"ActivityName\":\"Noget Med Penge\",\"Responsible\":\"Name\",\"EstimatedSavings\":9001.0,\"EstimatedStart\":\"19-11-2015\",\"EstimatedEnd\":\"01-01-2016\",\"Status\":\"NA\"},\"2\":{\"ActivityId\":2,\"ActivityName\":\"We need to shut down the bluetooth RAM hard drive!\",\"Responsible\":\"Name\",\"EstimatedSavings\":24589.0,\"EstimatedStart\":\"23-05-2014\",\"EstimatedEnd\":\"10-12-2015\",\"Status\":\"ON_TRACK\"},\"3\":{\"ActivityId\":3,\"ActivityName\":\"We need to encode the wireless RAM interface!\",\"Responsible\":\"Name\",\"EstimatedSavings\":874561.0,\"EstimatedStart\":\"11-04-1970\",\"EstimatedEnd\":\"22-01-2016\",\"Status\":\"DONE\"},\"4\":{\"ActivityId\":4,\"ActivityName\":\"We need to reboot the open-source PNG program!\",\"Responsible\":\"Name\",\"EstimatedSavings\":812654.0,\"EstimatedStart\":\"18-08-2000\",\"EstimatedEnd\":\"19-04-2016\",\"Status\":\"ISSUE\"},\"5\":{\"ActivityId\":5,\"ActivityName\":\"We need to program
the mobile CPU bus!\",\"Responsible\":\"Name\",\"EstimatedSavings\":-47998.0,\"EstimatedStart\":\"29-07-1982\",\"EstimatedEnd\":\"22-05-2016\",\"Status\":\"BEHIND\"},\"6\":{\"ActivityId\":6,\"ActivityName\":\"We need to network the optical GB port!\",\"Responsible\":\"Name\",\"EstimatedSavings\":74511.0,\"EstimatedStart\":\"23-10-1992\",\"EstimatedEnd\":\"27-09-2016\",\"Status\":\"ABANDONED\"}}"
最佳答案
首先GetActivityAbstracts
将创建重复的id
正如我所说。上面代码中<td id = "activityId"
和<td id = "activityName"
里面$.each
将会重复。也可以使用 .find
而不是 .attr
查找每个 tr
内的元素所以你要么改变 id
上课或添加index
来自.each
生成唯一的id
s。
function GetActivityAbstracts() {
$.getJSON(, function (testData) {
var object = $.parseJSON(testData);
var activityTable = '<tbody id="activityTable"></tbody>';
$.each(object, function (index,value) {
//index here is used to generate unique ids
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td id = "activityId_'+index+'" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td id = "activityName_'+index+'" style = "vertical-align: middle;">'
+ activityName + '</td>' +
//Add index for ids here
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
activityTable += tableElement;
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
现在,一旦生成了这个唯一元素,您就可以循环遍历每个 tr
如下:
function CreateActivityDeleteDropdown() {
var dropdown = $('#delete-activity-modal-dropdown');
$('tbody#activityTable tr').each(function() {
var activityId = $(this).find("td [id^='activityId']").text();
//get value from the td whose id starts with activityId
var activityName = $(this).find("td [id^='activityName']").text();
//get value from the td whose id start with activityName
var dropdownDescription = activityId + " | " + activityName;
var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>';
$(dropdown).append(dropdownElement);
});
}
现在如果你改变td
的id
至class
如下:
function GetActivityAbstracts() {
$.getJSON(, function (testData) {
var object = $.parseJSON(testData);
var activityTable = '<tbody id="activityTable"></tbody>';
$.each(object, function () {
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td class = "activityId" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td class= "activityName" style = "vertical-align: middle;">'
+ activityName + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
activityTable += tableElement;
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
您可以只使用 .find
再次得到各自的td
及其class
如下:
function CreateActivityDeleteDropdown() {
var dropdown = $('#delete-activity-modal-dropdown');
$('#activityTable tr td').each(function() {
var activityId = $(this).find(".activityId").text();
var activityName = $(this).find(".activityName").text();
//getting using class
var dropdownDescription = activityId + " | " + activityName;
var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>';
$(dropdown).append(dropdownElement);
});
}
<小时/>
更新
创建时发现的更多问题 DEMO
你正在吃 var activityTable = '<tbody id="activityTable"></tbody>';
最后,一旦创建了一行,您就可以执行 activityTable += tableElement;
操作。自从'activityTable variable already had
事件表 +=
used to append as
...'which is why a new
body was getting created when appended to
DOM . So either make it
通过执行以下操作来创建 tbody` 对象:
var activityTable = $('<tbody id="activityTable"></tbody>');
然后你可以使用.append
至append
tr
在创建的 tbody
内如下:
$(activityTable).append(tableElement);
而不是 activityTable += tableElement;
或
如果您想保持自己的方式,那么只需附加 </tbody>
一次全部rows
已添加如下:
var activityTable = '<tbody id="activityTable">';
//从这里删除
$.each
之后完成你可以做的事情
activityTable+="</table>";
关于javascript - 循环遍历表返回未定义的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33802777/