在做一个项目的原型的时候,需要做一些关于选择的页面,简单的说,就是表单的某些字段需要进行选择,从另外一个页面选择过来。所谓的选择,就肯定存在着多选或者是单选,针对于window.js进行了扩展,自己写了一个选择的脚本。
在被选择的页面上面,不想写二个页面,一个单选,一个多选来适应选择。第一反应就是想到了根据需要选择的页面上的选择的类型是checkbox/radio来生成被选择页面的check的类型。在动态的页面上就比较容易处理了,无非就是:
input type="${checkType}"
而在静态页面的处理上面就有点棘手了。首先想到的是jquery的库中的attr()。
马上着手写。
$J("input[type='"+cType+"'document).attr("type",self.checkType);
运行,抛出了异常,查看一下jquery的原码,看到了如下一段
// We can't allow the type property to be changed (since it causes problems in IE) if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode ) throw "type property can't be changed";
不支持。
遂想改用了hacker的方式,我只是需要修改一下类型,别的都不需要修改。
通过修改其innerHTML,用正则表达式替换一下类型。
$J("#select_entryTable tBody tr",_frame_document).each(function(i){ var _innerHTML = $J("td:eq("+_checkColumnIndex+")",this)[0].innerHTML; var _replaceHTML = _innerHTML; //在IE中,提取出来的为 type=checkbox,在firefox中为type='checkbox'(与写的一样) if((_innerHTML).indexOf('type='+_cType)!=-1){ _replaceHTML = _innerHTML.replace('type='+_cType,'type='+self.checkType); }else if((_innerHTML).indexOf("type='"+_cType+"'")!=-1){ _replaceHTML = _innerHTML.replace("type='"+_cType+"'","type='"+self.checkType+"'"); }else if((_innerHTML).indexOf('type="'+_cType+'"')!=-1){ _replaceHTML = _innerHTML.replace('type="'+_cType+'"','type="'+self.checkType+'"'); }else{ } $J("td:eq("+_checkColumnIndex+")",this).html(_replaceHTML); });
上面的代码中有我定义的几个,一个是_cType,是被选择页面的checkType,self.checkType,选择时的checkType,_checkColumnIndex就是我在列表出来的时候是第几行了,这是我的页面的组织形式,我是用表格来组织的。
测试,OK。