通过javascript处理DOM时在表的特定部分显示项目

绝对对你们来说很容易,但它使我头昏脑沉,而我却看不到自己在做什么。我还应该指出,我真的是Java语言的新手,而代码的模式使我感到困惑。

所以...我想有一个表格,如下所示,该表格是在使用我已经从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数据,然后“追加”到“模态主体”内部的表中。这是我的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) {
                        $('#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>');
                    });
                });
            });

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

如您所见,目前我仅将所有数据传递到一张表,并且没有进行过滤/条件迭代。

我的问题是...我该如何编写JavaScript以仅将满足第一个条件(preQualTypeId = 1)的项放在第一个表(id =“ preQual_Academic”)中,然后将其他项(其中preQualTypeId = 2)放在第一个表中第二个表(id =“ preQual_Access”)。

注意:我尝试了Jquery-.filter(),然后使用for()循环,但是我似乎无法以正确的语法编写它们,因此最终没有结果。

提前致谢。

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

这是API get请求的输出,因此您可以看到我正在使用的内容以及“ 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":30,"qualificationID":14,"main_Qual":"Degree","main_Level":6,"qualification":"GCSEs","level":2,"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},{"qual_Main":14,"preQual_Sub":50,"qualificationID":14,"main_Qual":"Degree","main_Level":6,"qualification":"National Diploma","level":3,"lmsLink":null,"preQualTypeID":2,"preQualType_Option":"Access","isAlternative":true}]
评论
  • sit_et
    sit_et 回复

    You can just determine where to append the row inside the function passed to .each, e.g. like this:

    $.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(/* ... */);
    });
    

    Sidenote - you probably don't want to append trs inside a tr, preQual_Academic and preQual_Access should probably be a tbody.