Question

我有一个日历asp页面，用户可以安排时间，每个人的时间都会显示在此表格上（类似于Google日历，但只有月视图）。我已经启动并运行它很好但我需要在打印时编辑页面以确保一切都适合一页。该表是通过ASP循环生成的，但这里是基本结构

<table id='calendar' class="cal">
<tr class="cal">
    <td class="cal" onclick="shoForm('5_10');">10
    <div class="cellDiv" id="5_10"></div>
    </td>
</tr>
</table>

我使用jQuery和AJAX填充此表，因此其中一个单元格下的示例项可能如此：

<div id='1' class='item'>
<span name='itmUserName' id='User1'>User1</span>
<span class='dnPrint'><br/></span>
Project: <span name='tasks' id='2'>Reviewing</span>1.5 hrs
</div>

在jQuery中，我将项目附加到像这样的单元格（其中curItemDay是项目的日期）：

$("#"+curItemDay).append(
    "<div id='"...see above.../div>"
);

现在这一切都运行良好，花花公子，视觉上网页加载完美。但是，当我们点击“打印”按钮时，我试图隐藏某些部分。

function printThis(){
    var names=document.getElementsByName("itmUserName");
    for(var i=0;i<names.length;i++){
        if(names[i].innerHTML.split(" ").length>1)
            names[i].innerHTML=names[i].innerHTML.charAt(0)+names[i].innerHTML.split(" ")[1].charAt(0);
        names[i].innerHTML="["+names[i].innerHTML+"] ";
    }
...more code....
}

这在FF中工作正常，但在IE中它不起作用。当我使用开发人员控制台（F12）浏览IE中的代码时，它甚至没有显示通过jQuery添加的项目。页面加载并显示所有内容，但代码似乎并不反映页面上的内容。

<td class="cal" onclick="shoForm('5_16');">
    Text - 16
    <div class="cellDiv" id="5_16"/>
</td>

注意：IE版本为8.0.6001.18702

Answer 1

您过度滥用innerHTML属性。

相反，为什么不做这样的事情：

<span name="itmUserName"><span class="printOn">[</span>J<span class="printOff">ohn </span>S<span class="printOff">mith</span><span class="printOn">]</span></span>

然后使用这个CSS：

@media screen {.printOn {display:none}}
@media print {.printOff {display:none}}

当用户在屏幕上打印或查看时，这将显示/隐藏相关部分。

Answer 2

我在这里找到答案：Accessing getElementsByName array after Jquery Ajax IE

更改

var names=document.getElementsByName("itmUserName");

要

var names=$('[name="itmUserName"]');

现在它的工作原理应该如此。

IE在jQuery之后没有更新代码？

2 个答案: