IE8对大数据量表格的处理真是很糟糕。微软在搞什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试</title>
    <style type="text/css">
        .grid
        {
            font-size:12px;
            border:solid 1px #99BBE8;
            border-collapse:collapse;
        }
        .grid td,.grid th
        {
            border:solid 1px #99BBE8;
        }
    </style>
</head>
<body>
    <table class="grid" width="100%">
        <thead>
            <tr>
                <th width="50">序号</th>
                <th>标题</th>
            </tr>
        </thead>
        <tbody id="dspBody">
            <tr id="tplRow" onmousemove="this.style.backgroundColor='#EBF3FD';"
                onmouseout="this.style.backgroundColor='';">
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <script language="javascript" type="text/javascript">
        var body = document.getElementById("dspBody");  //取得表格Body
        var template = document.getElementById("tplRow");   //取得tr,将其作为模板        //清空表格
        function ClearTable() {
            var newBody = document.createElement("tbody");
            var table = body.parentNode;
            table.replaceChild(newBody, body);
            body = newBody;
        }
        
        //创建新行
        function NewRow() {
            var newRow = template.cloneNode(true);
            body.appendChild(newRow);
            return newRow;
        }        window.onload = function() {
            ClearTable();   //清空表格内容
            
            //新增1000千数据
            for (var i = 0; i < 1000; i++) {
                var row = NewRow();
                row.cells[0].innerHTML = i + 1;
                row.cells[1].innerHTML = "新数据行" + (i + 1);
            }
        }
    </script>
</body>
</html>
这是一段动态生成的数据表格，加了个鼠标移过变色的效果
然而，这代码在IE8下面，如果把鼠标稍微移动快点，就卡得很明显
同样的代码在FF、以及其它版本IE下都很流畅，甚至IE8打开了兼容模式也很流畅
真不知道微软在搞什么。
有什么办法可以解决这个问题？

解决方案 »

  1.   

    IE 7 下测试流畅，去 IE 8 官网看看吧，要不就等 sp1, sp2, sp3... 吧
      

  2.   

    lz 发现没，csdn 已经取消了这种行变色特效，这么做应该有一定道理！
      

  3.   

    如果删除时回发服务器，完全可以让 Server 端去处理，
    如果删除是客户端行为，用脚本设置样式也很容易，这样带来滴开销仅仅是瞬时滴，
    而滑动变色是实时滴，何况 IE 8 还不完善！
      

  4.   

    如果删除是客户端行为，用脚本设置样式也很容易
    调用此函数即可 function SetEvenRowStyle(tBody, startRowIndex)L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>测试</title>
        <style type="text/css">
            .grid
            {
                font-size:12px;
                border:solid 1px #99BBE8;
                border-collapse:collapse;
            }
            .grid td,.grid th
            {
                border:solid 1px #99BBE8;
            }
        </style>
    </head>
    <body>
        <table class="grid" width="100%">
            <thead>
                <tr>
                    <th width="50">序号</th>
                    <th>标题</th>
                </tr>
            </thead>
            <tbody id="dspBody">
                <tr id="tplRow">
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <script language="javascript" type="text/javascript">
            var body = document.getElementById("dspBody");  //取得表格Body
            var template = document.getElementById("tplRow");   //取得tr,将其作为模板        //清空表格
            function ClearTable() {
                var newBody = document.createElement("tbody");
                var table = body.parentNode;
                table.replaceChild(newBody, body);
                body = newBody;
            }        //创建新行
            function NewRow() {
                var newRow = template.cloneNode(true);
                body.appendChild(newRow);
                return newRow;
            } // 设置 偶数行样式。
    function SetEvenRowStyle(tBody, startRowIndex)
    {
    if (startRowIndex % 2 == 0)
    startRowIndex++; for (var i=startRowIndex; i<tBody.rows.length; i+=2)
    tBody.rows[i].style.backgroundColor = "#EBF3FD";
    }        window.onload = function() {
                ClearTable();   //清空表格内容            //新增1000千数据
                for (var i = 0; i < 1000; i++) {
                    var row = NewRow();
                    row.cells[0].innerHTML = i + 1;
                    row.cells[1].innerHTML = "新数据行" + (i + 1);
                } SetEvenRowStyle(body, 0);
            }
        </script>
    </body>
    </html>