首页 > 其他分享 >JS实现table动态生成过程中,移动行checkbox值丢失问题的解决

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

时间:2023-09-20 12:07:42浏览次数:43  
标签:checkbox moveRow Elm myTable JS 数组 var table


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


=====================================================


标签:checkbox,moveRow,Elm,myTable,JS,数组,var,table
From: https://blog.51cto.com/u_16255870/7535789

相关文章

  • JS应用(很全了)
    如果你找的javascript的东西的话,建议你ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要让你挨着看的话,你就准备看完就去配眼镜!!事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture(); event.srcElement.releaseCaptur......
  • Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象
    世界坐标.getWorldPosition()基础坐标也就是模型的.position属性世界坐标:就是模型资深.position和所有父对象.position累加的坐标用.getWorldPosition()属性需要用三维向量表示摸个坐标后方可读取例如:constgeometry=newTHREE.BoxGeometry(100,100,100);constmaterial......
  • iptables使用示例
    iptable的各种targetiptables的结构:iptables由上而下,由Tables,Chains,Rules组成。一、iptables的表tables与链chainsiptables有Filter,NAT,Mangle,Raw四种内建表:1.Filter表Filter是iptables的默认表,它有以下三种内建链(chains):INPUT链 –处理来自外部的数据。OUTPUT链......
  • el-table中自定义悬浮提示结构,添加复制功能
    效果展示:代码:代码copyText(text){navigator.clipboard.writeText(text).then(()=>{this.$message.success("文本复制成功");}).catch(()=>{this.$message.error("文本复制失败");......
  • Http Fetch+StreamSaver.js在内存有限的设备下载大文件
    目前前端没有很好的api支持流式的文件的分片下载。如果直接把整个文件保存到Blob对象中再保存,有可能出现很多不可以预期的问题,可能会因为达到浏览器的Blob对象上限而下载失败。也有机会因为客户端内存太低而导致OOM。那如果我们有额外的文件服务器的话,可以选择把文件先导出到文件......
  • nodejs的安装配置
    node.js的介绍Node.js是一个基于ChromeJavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。V8引擎执行Javascript的速度非常快,性能非常好。N......
  • js 前端 时间日期 月份 日期不满10 前面加0
    法一://获取当前日期的yyyy-MM-dd格式vardate=newDate();varyear=date.getFullYear();varmonth=date.getMonth()+1<10?"0"+(date.getMonth()+1):date.getMonth()+1;varday=date.getDate()<10?"0"+date.getDate():date.get......
  • 探索 WPF 的 ITabletManager.GetTabletCount 在 Win11 系统的底层实现
    本文将和大家介绍专为WPF触摸模块提供的ITabletManager的GetTabletCount方法在Windows11系统的底层实现本文属于WPF触摸相关系列博客,偏系统底层介绍,更多触摸博客请看WPF触摸相关大家都知道在Windows7系统,有专门的笔和触摸服务提供触摸消息的支持。而WPF是从V......
  • 安装nodejs
    http://nodejs.cn/download/在nodejs安装目录下,创建“node_global”和“node_cache”两个文件夹 把【node_global】的路径“E:devToolsodejsode_global”加入到【系统变量】下的【PATH】变量中,方便直接使用命令行运行 再次执行npmconfiggetregistry,检......
  • Node.js ORM Sequelize All In One
    Node.jsORMSequelizeAllInOneSequelizeisaneasy-to-useandpromise-basedNode.jsORMtoolforPostgres,MySQL,MariaDB,SQLite,DB2,MicrosoftSQLServer,andSnowflake.Itfeaturessolidtransactionsupport,relations,eagerandlazyloading,read......