Question

我知道有类似的问题，但已经看了几个，没有提供和实际的解决方案。

我有一个函数，当页面加载时，如果有要填充的项目，则用行填充表格。这适用于IE8以外的所有浏览器。如果刷新页面然后按原样运行，但是在IE8中，如果您只是导航到页面，表格将保持不变。我在开发人员工具中的js中放置了断点，并且函数被调用并且没有错误地到达终点，当我检查对象时，表确实包含了它应该涉及的对象，但是没有渲染行在页面上的实际表格中。

以下是页面底部的代码：

<script type="text/javascript">
    $(document).ready(function () {
        addToTicketTable('12345');
    });
</script>

有什么想法吗？

修改

是的我使用tbody并且通过选择页面上的座位或刷新页面来调用函数时工作正常。只有在导航到页面时它才能正常工作。

这里要求的是addToTicketTable函数的代码。

function addToTicketTable(seatId) {
var zone = $("#ddlSections").val();
var sectText = $("#ddlSections option:selected").text();
var sectName = sectText.split(":")[0]
var sect = sectText.split(" ")[0];
if (sectText.toLowerCase().indexOf(" box") >= 0) {
    sect += " " + sectText.split(" ")[1];
}
var seat = "Best Available";
var priceType = -1;
var seatInfo = "";

if ($(".dvSeat").length > 0) {
    var arrInfo = document.getElementById(seatId).getElementsByTagName("input")[0].value.split(",");

    priceType = arrInfo[4];
    sect = arrInfo[3];
    if ($("#" + seatId).attr("class").indexOf(" box") >= 0) {
        sect += " box";
    }
    seat = arrInfo[0] + arrInfo[1];
    if ($("#" + seatId).attr("class").indexOf("restrictedView") > -1) {
        seatInfo = "Restricted View";
    }
    if ($("#" + seatId).attr("class").indexOf("standingSeat") > -1) {
        seatInfo = "Standing Ticket";
    }
    if ($("#" + seatId).attr("class").indexOf("wheelchair") > -1) {
        seatInfo = "Wheel Chair Space";
    }
    if ($("#" + seatId).attr("class").indexOf("behindConductor") > -1) {
        seatInfo = "Behind Conductor";
    }
    if ($("#" + seatId).attr("class").indexOf("noSurtitles") > -1) {
        seatInfo = "Surtitles not visible";
    }
    if ($("#" + seatId).attr("class").indexOf("restrictedLegRoom") > -1) {
        seatInfo = "Restricted Leg Room";
    }
    zone = arrInfo[2];
}
var tdSect = document.createElement("td");
tdSect.innerHTML = sectName;

var tdSeat = document.createElement("td");
tdSeat.innerHTML = seat;
if (seatInfo.length > 0) {
    tdSeat.innerHTML += " (" + seatInfo + ")";
}
var hdSeat = document.createElement("input");
hdSeat.id = "tblHd" + seatId;
hdSeat.className = "seatHD";
hdSeat.type = "hidden";
hdSeat.value = seatId;
$(tdSeat).append(hdSeat);

var tdTicket = document.createElement("td");
var ddl = document.createElement("select");
ddl.id = "ddlTicket" + seatId;
ddl.className = "ddlTicket";

var ddlStr = "";
if (document.getElementById("ddl" + zone) != null) {
    ddlStr = "ddl" + zone;
} else {
    ddlStr = "ddl" + sect.split(":")[0];
    if (ddlStr.indexOf(" ") > -1) {
        ddlStr = ddlStr.split(" ")[0];
    }
}
$("#" + ddlStr + " option").each(function () {
    var arrVal = this.value.split(',');
    if (arrVal[0] == zone) {
        var selected = false;
        if (priceType != null) {
            if (this.value.split(',')[1] == priceType) {
                selected = true;
            }
        }
        if (selected) {
            $(ddl).append($("<option></option>").attr("value", this.value).text(this.text).attr("selected", "true"));
        } else {
            $(ddl).append($("<option></option>").attr("value", this.value).text(this.text));
        }
    }
});
$(ddl).change(function () {
    $("#lblPrice" + seatId).html($(this).val().split(',')[2]);
    updateSeatInfo();
});
$(tdTicket).append(ddl);

var tdPrice = document.createElement("td");
var lblPrice = document.createElement("span");
lblPrice.id = "lblPrice" + seatId;
$(tdPrice).append(lblPrice);

var tdRemove = document.createElement("td");
var btnRemove = document.createElement("span");
btnRemove.className = "btnRem";
$(btnRemove).click(function () {
    remSeat(seatId);
});
$(tdRemove).append(btnRemove);

var tr = document.createElement("tr");
tr.id = "tr" + seatId;

$(tr).append(tdSect);
$(tr).append(tdSeat);
$(tr).append(tdTicket);
$(tr).append(tdPrice);
$(tr).append(tdRemove);

$("#tblSeats tbody").append(tr);
$("#lblPrice" + seatId).html($(ddl).val().split(',')[2]);
}

Answer 1

所以我在这里推测一点，因为没有提供足够的代码来完全确定问题，所以我将分享我在IE8中附加行的经验。

很可能，你有一个像这样的简单表结构：

<table>
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Stuff</td>
    </tr>
</table>

你的脚本是这样的：

<script>
    $("table").append("<tr><td>More Stuff</td></tr>");
</script>

嗯，IE8不允许您直接附加到<table>元素。相反，它要求您正确设置表结构并将其附加到<tbody>元素。像这样：

<table>
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stuff</td>
        </tr>
    </tbody>
</table>

并且您的jQuery必须更改以反映<tbody>元素的附加内容：

<script>
    $("tbody").append("<tr><td>More Stuff</td></tr>");
</script>

IE8追加$（文件）.ready（）

修改

1 个答案: