ie9 innerHTML不能与datatable .js创建的select元素一起工作
IE 9 innerHTML not working with select elements created by dataTables.js
我正在与http://www.datatables.net/合作。我为每个列创建了select元素，这些元素包含不同的列值列表。当调用select.change()时，我编写了代码来基于新表数据重新创建选择(单击的那个除外)。这在Chrome, Firefox和IE 10中非常有效。我不知道如何让它与ie9一起工作，我准备做一些浩克粉碎。
。innerHTML不起作用。Jquery的.html()不起作用。我尝试过。addchild()而不是options.add()。没有什么工作。选择项要么是空的，它们不会被过滤，要么在一个被过滤后，其余的都不触发select.change()事件。
编辑:我也试过回到一个重新创建的parentelelement . innerhtml()，以便抓住TH而不是选择作为第一次创建表。innerHTML = select
$(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;
}
在追加前用<div>包起来
我将change事件块中的代码移到了dom.ready之外。然后在每次重新填充过滤器时重新注册更改事件。
function selectEvent(table, t, i) {
table.fnFilter($(t).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 ((t).textContent != a[j + 1].textContent) {
a[j + 1].outerHTML = a[j + 1].outerHTML.replace(a[j + 1].innerHTML + '</select>', fnReCreateSelect(table.fnGetColumnData(j), j) + '</select>'); // 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 ($(t).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].inner = a[i + 1].outerHTML.replace(a[i + 1].innerHTML + '</select>', fnReCreateSelect(table.fnGetColumnData(i), i) + '</select>'); // Recreate drop down list for column selected (Because resetting drop down)
}
}
else {
// If column currently being looped is not the column clicked
if ((t).textContent != a[j + 1].textContent) {
var temp = fnReCreateSelect(table.fnGetColumnData(j), j);
var temp2 = a[j + 1].innerHTML;
//a[j + 1].innerHTML = fnReCreateSelect(oTable.fnGetColumnData(j), j);
a[j + 1].outerHTML = a[j + 1].outerHTML.replace(a[j + 1].innerHTML + '</select>', fnReCreateSelect(table.fnGetColumnData(j), j) + '</select>'); // Recreate drop down list for currently looping column
var temp3 = 5;
}
else {
filtered.push(j); // Add column to filtered array
}
}
}
$('select').change(this, function () {
selectEvent(oTable, this, this.parentElement.cellIndex);
});
}
相关文章：
- 如何在PHP中使用$_POST获取Select元素值
- X秒后刷新select元素
- 在select元素中显示highchart dashstyle(svg）
- 在IE9中使用jQuery.change定位select元素
- 使用Dalekjs测试工具，如何在Dropdown中选择Option(select元素）当没有“;值“;Option标记
- 如果选择了当前年份，则在Select元素中仅显示当前和未来月份
- 使用jquery验证函数不适用于select元素
- AngularJS:根据其他对象预先选择ng repeat中的select元素
- 减小select元素中的下拉宽度
- 我可以't从通过Ajax创建的select元素中设置值或获取值
- this.defaultValue 返回 select 元素的未定义
- 使用挖空.js如何刷新 Select 元素中的可观察数组
- 用于逐步增强的“select”元素的JavaScript中的事件处理程序
- 正在从开发人员工具中的select元素打印选项列表
- 丢失对jQuery存储的select元素的引用
- jQuery如何动态添加select元素和重置select
- 使用纯JavaScript获取事件的select元素值
- 在更改时，如果没有使用jquery更改，也可以删除对select元素的关注
- 为Select元素选择ONCHANGE
- 用Javascript将焦点设置在select元素上会将第一个项目滚动到视图之外
