【发布时间】：2013-06-20 13:59:42
【问题描述】：
我正在与http://www.datatables.net/ 合作。我为每个包含不同列值列表的列创建了选择元素。当调用 select.change() 时，我编写了代码以根据新表数据重新创建选择（单击的除外）。这在 Chrome、Firefox 和 IE 10 中运行良好。我不知道如何让它与 IE 9 一起使用，我正准备做一些 Hulk 粉碎。
.innerHTML 不起作用。 Jquery 的 .html() 不起作用。我试过 .addChild() 而不是 options.add()。没有任何效果。选择将是空的，它们不会被过滤，或者在过滤完一个后，其余的都不会触发 select.change() 事件。
编辑：我还尝试在重新创建时返回 parentElement.innerHTML() 以便在第一次创建表时获取 TH 而不是选择 th.innerHTML = 使用选择。
$(document).ready(function () {
/* Initialise the DataTable */
var oTable = $('#table').dataTable({
"sDom": '<"top"i>',
"bPaginate": false,
"bSort": false
})
/* Add a select menu for each TH element in the table footer */
$("thead th").each(function (i) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i), i);
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
// Get array of select controls
var a = document.getElementsByTagName('select');
// Loop through select controls
for (var j = 0; j < 7; j++) {
// If filtered array is not empty
if (filtered.length > 0) {
// If column currently being looped is not in filtered array
if ($.inArray(j, filtered) < 0) {
// If column currently being looped is not the column clicked
if ((this).textContent != a[j + 1].textContent) {
a[j + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(j), j); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
else
// If title is selected and currently looping column is the column selected
if ($(this).val() == "" && j == i) {
var index = $.inArray(j, filtered); // Get index of column in filtered array
filtered.splice(index, 1); // Remove column from filtered array
a[i + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(i), i); // Recreate drop down list for column selected (Because resetting drop down)
}
}
else {
// If column currently being looped is not the column clicked
if ((this).textContent != a[j + 1].textContent) {
// THE JQUERY WAY
//var col;
//switch (a[j + 1].id) {
// case "Dest": col = "#Dest"; break;
// case "Leg": col = "#Leg"; break;
// case "Start": col = "#Start"; break;
// case "End": col = "#End"; break;
// case "Day": col = "#Day"; break;
// case "Sort": col = "#Sort"; break;
// case "Services Days": col = "#Service Days"; break;
//}
//$(col).html(fnReCreateSelect(oTable.fnGetColumnData(j), j));
// THE JAVASCRIPT WAY
a[j + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(j), j); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
}
//$("select").hide().show(); // Might help with IE problems
});
});
fnGetColumnData 函数（获取不同的列值数组）
(function ($) {
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only want unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not want to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);
var sValue = aData[iColumn];
//if (sValue == " ") {
// sValue = "_";
//}
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData.sort();
}
}(jQuery));
在新浏览器中运行良好的 createSelect()，以及我一直在尝试使用的 reCreateSelect()。
function fnCreateSelect(aData, j) {
switch (j) {
case 0: j = "Dest"; break;
case 1: j = "Leg"; break;
case 2: j = "Start"; break;
case 3: j = "End"; break;
case 4: j = "Day"; break;
case 5: j = "Sort"; break;
case 6: j = "Service Days"; break;
}
var r = '<select id="'+j+'"><option value="">' + j + '</option>', i, iLen = aData.length;
for (i = 0 ; i < iLen ; i++) {
r += '<option value="' + aData[i] + '">' + aData[i] + '</option>';
}
return r + '</select>';
}
function fnReCreateSelect(aData, j) {
switch (j) {
case 0: j = "Dest"; break;
case 1: j = "Leg"; break;
case 2: j = "Start"; break;
case 3: j = "End"; break;
case 4: j = "Day"; break;
case 5: j = "Sort"; break;
case 6: j = "Service Days"; break;
}
var s = document.getElementById(j);
var op0 = document.createElement("option");
op0.text = "";
op0.value = j;
s.options.add(op0);
var iLen = aData.length;
for (i = 0 ; i < iLen ; i++) {
var op = document.createElement("option");
op.text = aData[i]
op.value = aData[i];
s.options.add(op);
}
return s;
}
【问题讨论】：
标签： javascript jquery internet-explorer-9 datatables innerhtml