javascript - 循环遍历表返回未定义的结果

Question

我必须创建一个用户可以删除的事件的下拉列表。这些事件是在一个表中进行的，我正在尝试迭代该表，但我觉得我已经快到了。我使用 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\"}}"

Answer 1

首先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>";