繁体中文
设为首页
加入收藏
当前位置:.Net技术首页 >> Asp.Net开发 >> JS实现table动态生成过程中,移动行checkbox值丢失问题的解决

JS实现table动态生成过程中,移动行checkbox值丢失问题的解决

2007-09-15 08:00:00  作者:  来源:互联网  浏览次数:0  文字大小:【】【】【
简介:  最近在做项目过程中遇到这样一个疑问:(查看实例代码TEST1)   DHTML中table对象的moveRow方法实现对table中表格行移动到新位置。例子TEST1中行2包含文本框、复选框、下拉框,当分别键入值后对行2执行上移...

  最近在做项目过程中遇到这样一个疑问:(查看实例代码TEST1)

  DHTML中table对象的moveRow方法实现对table中表格行移动到新位置。例子TEST1中行2包含文本框、复选框、下拉框,当分别键入值后对行2执行上移操作后,我们发现,文本框与下拉框的值不会丢失,但复选框值会丢失。而如果在行2中键入值后对行1执行下移操作,这时候所有值都不会丢失。这也就说明了moveRow方法对所操作行中复选框的值无法保存。

  这显然是ie存在的一个bug,虽然baidu到相同的提问,但是都没有最终的答案。幸运的是在google里找到了一份英文文档moveRow changes checkbox checked attribute,很好地解释了上述问题。

  其实解决方法很简单,就是通过对moveRow方法做一个封装,在执行moveRow前遍历table中所有的HTML控件,将所有checkbox的对象及其对应值添加到数组中(数组的push方法:将新元素添加到一个数组中,并返回数组的新长度值),在执行moveRow后对数组中所有元素获得checkbox对象对其赋值,该值为保存在数组的值,保证了值不丢失(数组的shift方法:移除数组中的第一个元素并返回该元素)。(查看实例代码TEST2)

//上移

function moveUp()

{

var myTable;

var Elm=event.srcElement;

while(Elm&&Elm.tagName!="TR"){

Elm=Elm.parentElement;

}

x = Elm.rowIndex;

myTable = Elm.parentElement;

//移到上一行

if (x > 0)

{

moveCell(myTable, x, x-1);

}

}

//下移

function moveDown()

{

var myTable;

var Elm=event.srcElement;

while(Elm&&Elm.tagName!="TR"){

Elm=Elm.parentElement;

}

x = Elm.rowIndex;

myTable = Elm.parentElement;

//移到下一行

if (x < myTable.rows.length - 1)

{

moveCell(myTable, x, x+1);

}

}

//移动行,参数:要操作的table,要相互移动的行a,b

function moveCell(myTable, a, b)

{

var el = myTable.all.tags("input")

var arr = [];

//遍历所有input控件

for(i = 0; i < el.length; i++)

{

if(el[i].type == "checkbox")

//对所有checkbox控件添加到数组中

arr.push(el[i], el[i].checked);

}

myTable.moveRow(a, b);

//对数组中所有元素获得对象并对引用的对象赋原值

while(arr.length > 0)

arr.shift().checked = arr.shift();

}

  这个问题也同样在单选框radio button中存在。

  PS:个人以为这种方式很好地解决了ie的bug引出的这个问题,所以将帖子放到首页,不知道合不合适,因为这个问题在国内的论坛中没发现提出解决方案的,所以希望对大家碰到类似问题有所帮助,任何见解一起讨论!如果放首页不合适,请dudu及时通知本人,谢谢!

  附件:实例代码

责任编辑:admin
相关文章