0

I have a calendar asp page that users schedule times and everyone's times are displayed on this table (similar to Google calendar but only month view). I have it up and running and it works great but I need to edit the page on printing to ensure everything fits on one page. The table is generated through an ASP loop but here is basic structure

<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>

I populate this table using jQuery and AJAX so an example item under one of the cells could be like so:

<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>

In jQuery, then I append items to cells like so (where curItemDay is the date for the item):

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

Now this all works fine and dandy and visually the web page loads perfect. However, I am trying to hide certain pieces when they click on a "Print" button.

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....
}

This works fine in FF but in IE it does not work. When I look through the code in IE using the developer console (F12) it doesn't even show the items that were added via jQuery. The page loads and displays everything, but the code doesn't seem to be reflecting what is on the page.

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

NOTE: IE version is 8.0.6001.18702

4

2 回答 2

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

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

于 2013-05-09T20:15:46.623 回答
0

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

改变了

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

至

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

现在它可以正常工作了。

于 2013-05-09T20:14:27.120 回答