时间戳

首页 > 解决方案 > 通过 javascript 操作 DOM 时在表格的特定部分显示项目

javascript - 通过 javascript 操作 DOM 时在表格的特定部分显示项目

问题描述

这对你们来说肯定很容易，但它让我头晕目眩，我已经忘记了我在做什么。我还应该指出，我对 Javascript 真的很陌生，代码的模式让我感到困惑。

所以......我想要一个如下所示的表，在我使用来自我制作的 API（来自 msSQL 数据库）的数据创建的模式中：

<table style="width:100%;">
    <tr>
        <th class="col-12" colspan="2">Academic Routes</th>
    </tr>
    <tr id="preQual_Academic">
        //Only include the rows that have the "preQualTypeId = 1"
    </tr>
</table>

<table style="width:100%;" id="preQual_Access">
    <tr id="preQual_Access">
        <th colspan="2">Access Routes</th>
    </tr>
    <tr id="preQual_Access">
        //Only include the rows that have the "preQualTypeId = 2"
    </tr>
</table>

为此，我从 API 调用加载 JSON 数据，然后“附加”到“modal-body”内的表中。这是我的javascript：

<script>
$.get(url + qualId, function (data) {
    $.each(data, function (i, item) {
        $('#preQual_Academic').append(
            '<tr><td class="col-8">'
            + item.qualification + " | Level " + item.level
            + '</td><td class="col-4">'
            + '<input type="checkbox" ' + 'value="' + item.isAlternative + '"></input>'
            + '</td></tr>');
        });
    });
});
</script>

如您所见，目前我只是将所有数据传递到一个表中，并且没有进行过滤/条件迭代。

我的问题是......我如何编写javascript只将满足第一个条件（preQualTypeId = 1）的项目放在第一个表（id =“preQual_Academic”）中，然后将其他项目（其中preQualTypeId = 2）第二个表（id="preQual_Access"）。

注意：我正在使用 Razor Pages 使用 ASP.Net Core 设计应用程序的其余部分。

这是 API 获取请求的输出，以便您可以看到我正在使用的内容以及“preQualTypeID”的来源：

[{"qual_Main":14,"preQual_Sub":2,"qualificationID":14,"main_Qual":"Degree","main_Level":6,"qualification":"A Levels","level":3,"lmsLink":null,"preQualTypeID":1,"preQualType_Option":"Academic","isAlternative":false},{"qual_Main":14,"preQual_Sub":32,"qualificationID":14,"main_Qual":"Degree","main_Level":6,"qualification":"Higher National Certificate","level":4,"lmsLink":null,"preQualTypeID":2,"preQualType_Option":"Access","isAlternative":true},]

更新包括基于@paolostyle 的建议的答案（感谢您的回答和评论）：

所以...由于评论中描述的浏览器兼容性，我最终实现了“Var”而不是“Let”，正如@paolostyle 所展示的那样。但是，原理是完全一样的。

这是我对 Javascript 的最终实现：

    <script>
    $(function () {
        $('#preQualModal').modal({
            keyboard: true,
            backdrop: "static",
            show: false,

        }).on('show.bs.modal', function () {
            var url = "/api/PreQualViewData/";
            var qualId = $(event.target).closest('tr').data('id');

            $.get(url + qualId, function (data) {
                $.each(data, function (i, item) {
                    var tableParent = item.preQualTypeID === 1 ? $('#preQual_Academic') : $('#preQual_Access');
                    var isAltTrue = item.isAlternative === true ? '<td class="col-5 text-center"><i class="far fa-check-square"></i></td>' : '<td class="col-4"></td>';

                    tableParent.append(
                        '<tr><td class="col-7">'
                        + item.qualification + " | Level " + item.level
                        + '</td>'
                        + isAltTrue
                        + '</tr >');
                });
            });
        });

        $('#preQualModal').on('hidden.bs.modal', function () {
            $(this).find('#preQual_Academic').html(''),
            $(this).find('#preQual_Access').html('')
        });
    });
</script>

如您所见，一旦我了解我需要使用条件语法创建变量，然后将其应用于最终追加。我开始变得更有创意，并添加了...

var isAltTrue = item.isAlternative === true ? '<td class="col-5 text-center"><i class="far fa-check-square"></i></td>' : '<td class="col-4"></td>';

...还有一些代码。

此外，我遵循@paolostyle 的建议并将附加更改<tbody>为每个表的而不是<tr>. 所以html看起来像这样：

<div class="modal fade hide" id="preQualModal" tabindex="-1" role="dialog" aria-labelledby="preQualsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="preQualsModalLabel">
                <i class="fas fa-graduation-cap"></i>
                Prerequisite Qualifications
            </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <table style="width:100%;">
                <thead>
                    <tr>
                        <th class="col-12" colspan="2">Academic Routes</th>
                    </tr>
                </thead>
                <tbody id="preQual_Academic">
                    @*API data goes here*@
                </tbody>
            </table>

            <table style="width:100%;">
                <thead>
                    <tr>
                        <th class="col-7">Access Courses</th>
                        <th class="col-5 text-center">Alternative route</th>
                    </tr>
                </thead>
                <tbody id="preQual_Access">
                    @*API data goes here*@
                </tbody>
            </table>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

希望这可以帮助像我一样缺乏 Javascript 知识的人。

标签： javascripthtmljqueryhtml-tableeach

解决方案

您可以确定在传递给的函数内附加行的位置.each，例如：

$.each(data, function (i, item) {
    // assuming you only have two possible values for preQualTypeID
    let rowParent = item.preQualTypeID === 1 ? $('#preQual_Academic') : $('#preQual_Access');
    rowParent.append(/* ... */);
});

旁注-您可能不想tr在 a 中附加 s tr，preQual_Academic而preQual_Access应该是 a tbody。

如果您有更多案例要处理，您可以使用一个switch或几个if语句：

let rowParent;  // you can also assign here the "default" value
switch (item.preQualTypeId) {
  case 1:
    rowParent = $('#preQual_Academic');
  break;
  case 2:
    // ...
  break;
  case 3:
    // ...
  break;
  // ...
}

// OR

let rowParent; // you can also assign here the "default" value
if (item.preQualTypeID === 1) {
  rowParent = $('#preQual_Academic');
} else if (item.preQualTypeID === 2) {
  // ...
} else if (item.preQualTypeID === 3) {
  // ...
}

就像我在上面的评论中提到的那样，您也可以let rowParent = $('#preQual_Academic');跳过第一个 if/switch 案例。

推荐阅读