最近尝试开发一个简单的在线报表,基本工作流程如下:

index.html页面中有一DIV元素,id="div_result",默认没有任何内容;

index.html页面有一段jQuery代码,作用是使用$.get()向 /test.php 发送请求,返回的内容一个表格 的html代码,使用$("#div_result").html()输出到当前页面的div元素中。

这段返回的html代码(表格)中含有jQuery代码,作用是处理表格样式(隔行变色,选中行高亮显示)。

出现的问题:

在chrome浏览器中:快速在表格上移动鼠标,选中行高亮的特效响应速度非常快。

在所有IE浏览器中:上述特效出现明显的卡顿现象,无论表格行数多少都是如此。

停掉$("div_result").html(),手动在index.html中的div元素下面加入一静态表格并填充测试数据,使用相同的jQuery代码处理表格特效,chrome和IE响应速度都非常快。

主要代码如下:

function get_data(tb_typ) {

$.ajax({

type:"get",

url:"result.php",

data:"table_type="+tb_typ,

cache:false,

success:function(data){$('#result_div').html(data);},

databype:"html"}

)

}

$(document).ready(function(){

var dataVal = "orders";

get_data(dataVal);

//隔行变色,选中高亮

var tb_obj = $('#my_table');

tb_obj.find('tr:even').addClass('row_even');

tb_obj.find('tr:odd').addClass('row_odd');

tb_obj.find('tr').not(':first')

.mouseover(function(){

$(this).addClass('tr_over');

})

.mouseout(function(){

$(this).removeClass('tr_over');

});

});

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐