最近在做项目过程中遇到这样一个疑问:(查看实例代码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
分享到:
相关推荐
本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...
C#的winform是没有webform的RadioButtonList和CheckBoxList这两个...要实现从数据库取出数据后动态生成N个RadioButton和CheckBox并获取选中项目的值,请看本例。思路很简单,有问题请指出,相互学习共同进步,谢谢。
在本文中,我们将深入探讨如何在layui框架中创建一个表格,其中某一列显示为复选框(checkbox),以便实现单选功能。layui是一款基于前端的轻量级组件库,提供了丰富的UI组件,包括表格(table)、按钮、表单元素等...
总结,"table中checkbox取值"这一主题涉及到HTML元素结构、JavaScript和jQuery的操作、表单提交、前端状态管理和事件监听等多个知识点。熟练掌握这些技能,能帮助开发者更好地实现用户界面的交互功能,提高用户体验...
- 根据获取的值动态生成相应数量的行。 2. **构建表格结构**: - 使用 `insertRow()` 和 `insertCell()` 方法来创建行和单元格。 - 设置每个单元格的宽度和内容。 - 在某些单元格中嵌入 HTML 代码,如下拉列表、...
这样,我们就实现了在layui table中动态禁用部分checkbox,并在全选操作时排除这些禁用的checkbox。 总结来说,layui table的复选框功能可以通过列定义中的`checkbox`属性开启,通过监听`checkbox`事件和使用`check...
### 动态获取RecyclerView中CheckBox的值 在Android开发中,`RecyclerView`是用于展示大量数据集合的一个常用组件。为了实现列表项中的CheckBox选中状态的动态获取,并将这些状态反馈给Activity或Fragment进行处理...
在网页开发中,表格(Table)是常用的数据展示方式,而复选框(Checkbox)则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细...
本文将详细介绍如何使用JavaScript获取GridView中选中Checkbox行的信息。 首先,理解基础概念: 1. **JavaScript**:一种运行在客户端的脚本语言,常用于网页动态效果的实现和与用户的交互。 2. **GridView**:通常...
在H5页面中,"点击checkbox动态显示table"是一个常见的交互功能,特别是在B2B(Business to Business)场景下,例如模拟淘宝店家定义商品的SKU(Stock Keeping Unit,库存量单位)设置。这个功能允许用户通过勾选...
在网页设计中,表格(Table)元素是一种常用的数据展示方式,它可以有效地组织和排列信息。在本实例中,我们将探讨如何利用HTML的`<table>`元素以及相关的CSS样式,来创建一个类似163邮箱中复选框效果的界面。这个...
在界面中,使用纯js完成。把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基
在Flex编程中,动态生成组件是一项常见的需求,特别是在创建用户界面时,可能需要根据后端数据自动生成元素,如复选框(Checkbox)组。"Flex动态生成checkbox组"这个主题,就是关于如何在Flex应用中利用代码动态创建...
本文将深入探讨如何根据JSON文本动态生成可分组的表格,并实现checkbox的partial check功能,这一功能常见于数据管理和筛选场景中。 首先,让我们了解JSON(JavaScript Object Notation)文本。JSON是一种轻量级的...
flex动态生成checkbox,方便多项选择维护更新
Android中RecyclerView在TV中处理控件焦点移动,EditText值的修改,CheckBox复用等问题解决,详细了解请移步:http://blog.csdn.net/zxc514257857/article/details/74990099
在这个示例中,假设每行数据都有一个`data-related-to`属性,与对应的checkbox值匹配,这样就能实现联动效果。 综上所述,jQuery为处理checkbox和table提供了强大的工具,使得开发者能够高效地构建功能丰富的网页...
"json获取datatable后生成table分页显示checkbox全选"这个主题涵盖了几个重要的JavaScript和前端开发技术,这些技术有助于提升用户体验并优化服务器资源。以下是这些知识点的详细说明: 1. **JSON (JavaScript ...
在本文中,我们将探讨如何在C#中动态生成和获取CheckBox控件的值,主要关注两种不同的实现方式。 **方法一:服务器容器控件中添加子控件** 在ASP.NET中,我们可以利用服务器端控件来动态创建CheckBox。这种方式的...