使用 jquery 动态创建 <td>。 IE 11 中的意外结果
Creating <td> dynamically using jquery. Unexpected results in IE 11
我正在编写各种仪表板。进行了多次 API 调用，并根据结果在屏幕上动态创建元素。
这在 Chrome 56、Firefox ESR 45.7.x 和 Microsoft Edge 中达到了预期的 100%。
罪魁祸首是 IE 11（不幸的是，我仍然需要支持它）。
动态创建单元格时（查找以 'var col1LED' 开头的行），出于某种原因，它仅适用于 秒（以及随后的那些） $.each 的迭代。在第一次迭代中，存在 key 的值（我已经使用 console.log 进行了检查）但是生成的 td 对象是空的.
我不知道下一步该往哪里看。我已经 Google 并在 leborem 搜索了这个 ，但没有任何重要结果。
以下是直接从仪表板复制的代码（有明显的敏感 names/calls 更改）。
/* ... this happens inside the '.done' of another ajax call */
dataTable = $("#tblData");
$.each(response.data, function(row, key)
{
$.ajax({
method: "GET",
url: url.origin + "/API/v1/objects/" + key.ID,
data: { type: "wlc", identifier_type: "wlcap", status: "0" },
}).done(function(apResponse){
/* Determine the status for each AP found
Status values for each
1 - Active and associated
2 - Disassociated
3 - Downloading
all that don't match go to 'u' for 'unknown;'
*/
var status_1 = 0;
var status_2 = 0;
var status_3 = 0;
var status_u = 0; //Unknown
$.each(apResponse.data, function(apRow, apKey){
switch (apKey.status){
case "1":
status_1 += 1;
break;
case "2":
status_2 += 1;
break;
case "3":
status_3 += 1;
break;
default:
status_u += 1;
break;
}
})
/* Once all the AP statusses have been tallied, write the info for the specific node */
var ledFile = "LEDgreen.svg";
var cssClass = "table-cell-black";
if (status_2 != 0)
{
ledFile = "LEDred.svg";
cssClass = "table-cell-critical";
} else if (status_3 != 0) {
ledFile = "LEDorange.svg";
cssClass = "table-cell-warning";
} else {
ledFile = "LEDgreen.svg";
cssClass = "table-cell-black";
}
clearPanel("#tblController"); //First clear any existing data using seperate function
/* Create headers for table */
var colHead1LED = $('<th></th>').addClass('table-header table-cell-center').html('');
var colHead2wlcDetail = $('<th></th>').addClass('table-header table-cell-left').html('');
var colHead3APOK = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Active and Asssociated">A/A</div>');
var colHead4APDown = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Disassociated">D/A</div>');
var colHead5APTotal = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Downloading">D/L</div>');
var colHead6APExtra = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Total">Total</div>');
/* Add new row */
var headerRow = $('<tr></tr>');
/* Append each of the cells/headers to the header row */
headerRow.append(colHead1LED);
headerRow.append(colHead2wlcDetail);
headerRow.append(colHead3APOK);
headerRow.append(colHead4APDown);
headerRow.append(colHead5APTotal);
headerRow.append(colHead6APExtra)
/* Add row to table */
dataTable.append(headerRow);
/* Create cells */
var col1LED = $('<td></td>').addClass('table-cell table-cell-center').html('<img class="LED" style="width:1.0em;height:1.0em;" title="Status" src="resources/images/'+ ledFile +'">');
var col2wlcDetail = $('<td></td>').addClass('table-cell ' + cssClass).html('<a href="#" onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" title="' + key.description + ' (' + key.ip + ')">' + key.description + ' (' + key.ip + ')</a>');
var col3APOK = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 1);" class="button-success">' +status_1 + '</button>');
var col4APDown = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 2);" class="button-danger">' +status_2 + '</button>');
var col5APTotal = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 3);" class="button-warning">' +status_3 + '</button>');
var col6APExtra = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" class="button-info">' + (status_1 + status_2 + status_3) + '</button>');
/* Create data row */
var dataRow = $('<tr></tr>').addClass('table-row-data');
/* Add cells to row*/
dataRow.append(col1LED);
dataRow.append(col2wlcDetail);
dataRow.append(col3APOK);
dataRow.append(col4APDown);
dataRow.append(col5APTotal);
dataRow.append(col6APExtra);
/* add row to array*/
tableWlcData.push(dataRow);
}).promise().done(function(){
/* Once everything is done, append the array of ROWS to the table */
dataTable.append(tableWlcData);
});
});
一个可能的原因可能是您在每个同步循环中 运行 AJAX 请求，并在每个请求的成功回调中使用 "key" 的值，这是异步的，因此 key 的范围丢失。
如果这不能解决问题，请 post 一个 fiddle 与 HTML 和上下文的其余部分（如果需要，使用虚拟数据），我会很高兴为您详细复习。不过，为了正确和 stable Javascript 代码，您应该保留自调用功能。
更新的答案：
尝试将其添加到最终的 promise() 中：
var html = tableWlcData.join("\n");
console.log(html);
dataTable.html(html);
如果将 table 的 HTML 直接设置到 table 中而不是通过 jQuery 对象将其作为数组附加在 IE 中无法修复, 然后请查看打印到控制台的 HTML 并检查是否存在任何可能导致 IE11 阻塞的格式错误 HTML。
此外，请确保您使用的是最新版本的 jQuery（当前版本为 3.1.1），以防万一您使用的版本中存在 IE-specific 错误。
下面一行是罪魁祸首：
clearPanel("#tblController"); //First clear any existing data using seperate function
这是一个仅执行以下操作的函数：
function clearPanel(elementId)
{
$(elementId).html('');
}
不确定为什么这会导致问题，但我将循环更改为仅在我位于“0”行时才执行 clearPanel。
正在工作
我正在编写各种仪表板。进行了多次 API 调用，并根据结果在屏幕上动态创建元素。
这在 Chrome 56、Firefox ESR 45.7.x 和 Microsoft Edge 中达到了预期的 100%。 罪魁祸首是 IE 11（不幸的是，我仍然需要支持它）。
动态创建单元格时（查找以 'var col1LED' 开头的行），出于某种原因，它仅适用于 秒（以及随后的那些） $.each 的迭代。在第一次迭代中，存在 key 的值（我已经使用 console.log 进行了检查）但是生成的 td 对象是空的.
我不知道下一步该往哪里看。我已经 Google 并在 leborem 搜索了这个 ，但没有任何重要结果。
以下是直接从仪表板复制的代码（有明显的敏感 names/calls 更改）。
/* ... this happens inside the '.done' of another ajax call */
dataTable = $("#tblData");
$.each(response.data, function(row, key)
{
$.ajax({
method: "GET",
url: url.origin + "/API/v1/objects/" + key.ID,
data: { type: "wlc", identifier_type: "wlcap", status: "0" },
}).done(function(apResponse){
/* Determine the status for each AP found
Status values for each
1 - Active and associated
2 - Disassociated
3 - Downloading
all that don't match go to 'u' for 'unknown;'
*/
var status_1 = 0;
var status_2 = 0;
var status_3 = 0;
var status_u = 0; //Unknown
$.each(apResponse.data, function(apRow, apKey){
switch (apKey.status){
case "1":
status_1 += 1;
break;
case "2":
status_2 += 1;
break;
case "3":
status_3 += 1;
break;
default:
status_u += 1;
break;
}
})
/* Once all the AP statusses have been tallied, write the info for the specific node */
var ledFile = "LEDgreen.svg";
var cssClass = "table-cell-black";
if (status_2 != 0)
{
ledFile = "LEDred.svg";
cssClass = "table-cell-critical";
} else if (status_3 != 0) {
ledFile = "LEDorange.svg";
cssClass = "table-cell-warning";
} else {
ledFile = "LEDgreen.svg";
cssClass = "table-cell-black";
}
clearPanel("#tblController"); //First clear any existing data using seperate function
/* Create headers for table */
var colHead1LED = $('<th></th>').addClass('table-header table-cell-center').html('');
var colHead2wlcDetail = $('<th></th>').addClass('table-header table-cell-left').html('');
var colHead3APOK = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Active and Asssociated">A/A</div>');
var colHead4APDown = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Disassociated">D/A</div>');
var colHead5APTotal = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Downloading">D/L</div>');
var colHead6APExtra = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Total">Total</div>');
/* Add new row */
var headerRow = $('<tr></tr>');
/* Append each of the cells/headers to the header row */
headerRow.append(colHead1LED);
headerRow.append(colHead2wlcDetail);
headerRow.append(colHead3APOK);
headerRow.append(colHead4APDown);
headerRow.append(colHead5APTotal);
headerRow.append(colHead6APExtra)
/* Add row to table */
dataTable.append(headerRow);
/* Create cells */
var col1LED = $('<td></td>').addClass('table-cell table-cell-center').html('<img class="LED" style="width:1.0em;height:1.0em;" title="Status" src="resources/images/'+ ledFile +'">');
var col2wlcDetail = $('<td></td>').addClass('table-cell ' + cssClass).html('<a href="#" onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" title="' + key.description + ' (' + key.ip + ')">' + key.description + ' (' + key.ip + ')</a>');
var col3APOK = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 1);" class="button-success">' +status_1 + '</button>');
var col4APDown = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 2);" class="button-danger">' +status_2 + '</button>');
var col5APTotal = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 3);" class="button-warning">' +status_3 + '</button>');
var col6APExtra = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" class="button-info">' + (status_1 + status_2 + status_3) + '</button>');
/* Create data row */
var dataRow = $('<tr></tr>').addClass('table-row-data');
/* Add cells to row*/
dataRow.append(col1LED);
dataRow.append(col2wlcDetail);
dataRow.append(col3APOK);
dataRow.append(col4APDown);
dataRow.append(col5APTotal);
dataRow.append(col6APExtra);
/* add row to array*/
tableWlcData.push(dataRow);
}).promise().done(function(){
/* Once everything is done, append the array of ROWS to the table */
dataTable.append(tableWlcData);
});
});
一个可能的原因可能是您在每个同步循环中 运行 AJAX 请求，并在每个请求的成功回调中使用 "key" 的值，这是异步的，因此 key 的范围丢失。
如果这不能解决问题，请 post 一个 fiddle 与 HTML 和上下文的其余部分（如果需要，使用虚拟数据），我会很高兴为您详细复习。不过，为了正确和 stable Javascript 代码，您应该保留自调用功能。
更新的答案：
尝试将其添加到最终的 promise() 中：
var html = tableWlcData.join("\n");
console.log(html);
dataTable.html(html);
如果将 table 的 HTML 直接设置到 table 中而不是通过 jQuery 对象将其作为数组附加在 IE 中无法修复, 然后请查看打印到控制台的 HTML 并检查是否存在任何可能导致 IE11 阻塞的格式错误 HTML。
此外，请确保您使用的是最新版本的 jQuery（当前版本为 3.1.1），以防万一您使用的版本中存在 IE-specific 错误。
下面一行是罪魁祸首：
clearPanel("#tblController"); //First clear any existing data using seperate function
这是一个仅执行以下操作的函数：
function clearPanel(elementId)
{
$(elementId).html('');
}
不确定为什么这会导致问题，但我将循环更改为仅在我位于“0”行时才执行 clearPanel。
正在工作