最近在项目中遇到一个页面展示的问题,我在做一个查询结果的展示页面,页面要的效果如下:
查询出来默认展示的列表为VPDJ开头的那些数据,然后通过点击对应的VPDJ号,展示其对应的SJSD的数据。
我的做法是把所有数据都默认查询出来展示好,然后给SJSD开头的对应的表格所有的<tr>上加style="display:none"。在点击事件的时候,我一开始用的是DOM对象来处理:
function isShow(voucherNo){
var voucherNoTR = document.getElementById(voucherNo);
if(voucherNoTR.getAttribute("style") == ""){
voucherNoTR.setAttribute("style")="display:none";
}else{
voucherNoTR.setAttribute("style")="";
}
}
当时我用的是ie9,一点问题都没有,可是后来测试的时候发现,在ie10、ie8中,点击VPDJ号并不能够展示下面内容,直接没有反应,后来网上查了一下资料刚刚知道原来ie10中,某些情况下,动态DOM元素的自定义属性无法再用 obj.getAttribute(name) 来获取,于是我把DOM对象换成了jquery对象:
function isShow(voucherNo){
var voucherNoTR = document.getElementById(voucherNo);
if($(voucherNoTR).attr("style") == ""){
$(voucherNoTR).attr("style","display:none");
}else{
$(voucherNoTR).attr("style","");
}
}
改完后,我测试了一下,在ie10中终于可以继续用了,但是在ie8中发现还是不行,后来发现,ie8中对setAttribute的方法支持的有些问题,使其兼容的方法:
function isShow(voucherNo){
var voucherNoTR = document.getElementById(voucherNo);
if($(voucherNoTR).attr("style") == ""){
voucherNoTR.style.cssText ="display:none;";
}else{
voucherNoTR.style.cssText ="";
}
}