IE 9 innerHTML不使用dataTables.js创建的select元素

时间:2013-06-20 13:59:42

标签: javascript jquery internet-explorer-9 datatables innerhtml

我正在使用http://www.datatables.net/。我为每个列创建了选择元素,这些元素包含不同的列值列表。当调用select.change()时,我编写了代码来重新创建基于新表数据的选择(单击一个)。这在Chrome,Firefox和IE 10中运行良好。我无法弄清楚如何让它与IE 9一起工作,我准备做一些绿巨人粉碎了。

.innerHTML不起作用。 Jquery的.html()不起作用。我尝试过.addChild()而不是options.add()。什么都行不通。选择将为空,它们不会被过滤,或者在过滤之后,其余的都不会引发select.change()事件。

编辑:我还尝试在重新创建时返回parentElement.innerHTML(),以便在第一次创建表时抓取TH而不是select.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 == "&nbsp;") {
                        //    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;
            }

2 个答案:

答案 0 :(得分:0)

在追加之前将其包裹在<div>

答案 1 :(得分:0)

我将代码移到了dom.ready之外的change事件块中。然后,每次重新填充过滤器时,我都会重新注册更改事件。

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);
                });
            }