通过 javascript 操作 DOM 时在 table 的特定部分显示项目
Show items in specific parts of a table when manipulating the DOM via javascript
这对你们来说肯定很容易,但它让我头晕目眩,我忘记了我在做什么。我还应该指出,我是 Javascript 的新手,代码的模式让我感到困惑。
所以...我想要一个如下所示的 table,在我使用来自 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 数据,然后将 "appending" 加载到 "modal-body" 中的 tables .这是我的 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>
如您所见,目前我只将所有数据传递给 table 并且没有发生 filtering/conditional 迭代。
我的问题是...如何编写 javascript 以仅将满足第一个条件 (preQualTypeId = 1) 的项目放在第一个 table ( id="preQual_Academic") 然后是其他项目(其中 preQualTypeId = 2)第二个 table (id="preQual_Access").
注意:我正在使用 ASP.Net 使用 Razor Pages 的核心来设计应用程序的其余部分。
这是 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":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" 而不是 @paolostyle 所演示的 "Let" 。但是原理是完全一样的
这是我对 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 的建议,并将附加更改为每个 table 的 <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">×</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。
您可以只确定在传递给 .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
、preQual_Academic
内附加 tr
,而 preQual_Access
应该是 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 案例。
这对你们来说肯定很容易,但它让我头晕目眩,我忘记了我在做什么。我还应该指出,我是 Javascript 的新手,代码的模式让我感到困惑。
所以...我想要一个如下所示的 table,在我使用来自 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 数据,然后将 "appending" 加载到 "modal-body" 中的 tables .这是我的 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>
如您所见,目前我只将所有数据传递给 table 并且没有发生 filtering/conditional 迭代。
我的问题是...如何编写 javascript 以仅将满足第一个条件 (preQualTypeId = 1) 的项目放在第一个 table ( id="preQual_Academic") 然后是其他项目(其中 preQualTypeId = 2)第二个 table (id="preQual_Access").
注意:我正在使用 ASP.Net 使用 Razor Pages 的核心来设计应用程序的其余部分。
这是 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":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" 而不是 @paolostyle 所演示的 "Let" 。但是原理是完全一样的
这是我对 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 的建议,并将附加更改为每个 table 的 <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">×</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。
您可以只确定在传递给 .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
、preQual_Academic
内附加 tr
,而 preQual_Access
应该是 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 案例。