`
thomas0988
  • 浏览: 486689 次
  • 性别: Icon_minigender_1
  • 来自: 南阳
社区版块
存档分类
最新评论

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

 
阅读更多

 最近在做项目过程中遇到这样一个疑问:(查看实例代码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();
}
=====================================================

http://hi.baidu.com/srvecyqsxiijnye/item/605bd09d9a307689591461b4

分享到:
评论

相关推荐

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...

    C#_winform_动态生成RadioButton和CheckBox并获取选中值

    C#的winform是没有webform的RadioButtonList和CheckBoxList这两个...要实现从数据库取出数据后动态生成N个RadioButton和CheckBox并获取选中项目的值,请看本例。思路很简单,有问题请指出,相互学习共同进步,谢谢。

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    在本文中,我们将深入探讨如何在layui框架中创建一个表格,其中某一列显示为复选框(checkbox),以便实现单选功能。layui是一款基于前端的轻量级组件库,提供了丰富的UI组件,包括表格(table)、按钮、表单元素等...

    table中checkbox取值

    总结,"table中checkbox取值"这一主题涉及到HTML元素结构、JavaScript和jQuery的操作、表单提交、前端状态管理和事件监听等多个知识点。熟练掌握这些技能,能帮助开发者更好地实现用户界面的交互功能,提高用户体验...

    javascript动态生成table及处理.

    - 根据获取的值动态生成相应数量的行。 2. **构建表格结构**: - 使用 `insertRow()` 和 `insertCell()` 方法来创建行和单元格。 - 设置每个单元格的宽度和内容。 - 在某些单元格中嵌入 HTML 代码,如下拉列表、...

    layui动态禁用checkbox.rar

    这样,我们就实现了在layui table中动态禁用部分checkbox,并在全选操作时排除这些禁用的checkbox。 总结来说,layui table的复选框功能可以通过列定义中的`checkbox`属性开启,通过监听`checkbox`事件和使用`check...

    动态获取recyclerView中CheckBox的值

    ### 动态获取RecyclerView中CheckBox的值 在Android开发中,`RecyclerView`是用于展示大量数据集合的一个常用组件。为了实现列表项中的CheckBox选中状态的动态获取,并将这些状态反馈给Activity或Fragment进行处理...

    实现table表格checkbox复选框的全选 反选

    在网页开发中,表格(Table)是常用的数据展示方式,而复选框(Checkbox)则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细...

    js获得Gridview中选中checkbox行的信息

    本文将详细介绍如何使用JavaScript获取GridView中选中Checkbox行的信息。 首先,理解基础概念: 1. **JavaScript**:一种运行在客户端的脚本语言,常用于网页动态效果的实现和与用户的交互。 2. **GridView**:通常...

    H5中点击checkbox动态显示table

    在H5页面中,"点击checkbox动态显示table"是一个常见的交互功能,特别是在B2B(Business to Business)场景下,例如模拟淘宝店家定义商品的SKU(Stock Keeping Unit,库存量单位)设置。这个功能允许用户通过勾选...

    利用table元素,编写 类似163邮箱 checkbox的效果【实例】(

    在网页设计中,表格(Table)元素是一种常用的数据展示方式,它可以有效地组织和排列信息。在本实例中,我们将探讨如何利用HTML的`&lt;table&gt;`元素以及相关的CSS样式,来创建一个类似163邮箱中复选框效果的界面。这个...

    js实现翻页后保持checkbox选中状态的实现方法

    在界面中,使用纯js完成。把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基

    Flex动态生成checkbox组

    在Flex编程中,动态生成组件是一项常见的需求,特别是在创建用户界面时,可能需要根据后端数据自动生成元素,如复选框(Checkbox)组。"Flex动态生成checkbox组"这个主题,就是关于如何在Flex应用中利用代码动态创建...

    利用jquery根据json文本动态的生成可分组的table,并实现checkbox partial check功能

    本文将深入探讨如何根据JSON文本动态生成可分组的表格,并实现checkbox的partial check功能,这一功能常见于数据管理和筛选场景中。 首先,让我们了解JSON(JavaScript Object Notation)文本。JSON是一种轻量级的...

    flex动态生成checkbox

    flex动态生成checkbox,方便多项选择维护更新

    Android中RecyclerView在TV中处理控件焦点移动,EditText值的修改,CheckBox复用等问题解决

    Android中RecyclerView在TV中处理控件焦点移动,EditText值的修改,CheckBox复用等问题解决,详细了解请移步:http://blog.csdn.net/zxc514257857/article/details/74990099

    jQuery之实战(checkbox,table)

    在这个示例中,假设每行数据都有一个`data-related-to`属性,与对应的checkbox值匹配,这样就能实现联动效果。 综上所述,jQuery为处理checkbox和table提供了强大的工具,使得开发者能够高效地构建功能丰富的网页...

    json获取datatable后生成table分页显示checkbox全选

    "json获取datatable后生成table分页显示checkbox全选"这个主题涵盖了几个重要的JavaScript和前端开发技术,这些技术有助于提升用户体验并优化服务器资源。以下是这些知识点的详细说明: 1. **JSON (JavaScript ...

    C#获取动态生成的CheckBox值

    在本文中,我们将探讨如何在C#中动态生成和获取CheckBox控件的值,主要关注两种不同的实现方式。 **方法一:服务器容器控件中添加子控件** 在ASP.NET中,我们可以利用服务器端控件来动态创建CheckBox。这种方式的...

Global site tag (gtag.js) - Google Analytics