Hacker的方式实现jQuery的Type的变化

最新推荐文章于 2025-11-25 08:44:41 发布

最新推荐文章于 2025-11-25 08:44:41 发布 · 141 阅读

文章标签：

#jQuery #IE #正则表达式 #Firefox #J# #ViewUI

Ajax 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种针对表单选择需求的自定义脚本实现方法，该方法能够灵活地改变选择项类型（如单选或多选），并适用于静态页面环境。

在做一个项目的原型的时候，需要做一些关于选择的页面，简单的说，就是表单的某些字段需要进行选择，从另外一个页面选择过来。所谓的选择，就肯定存在着多选或者是单选，针对于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。