使用util.js处理表格
(util.js文件的链接:http://pan.baidu.com/s/1kUMJNrL 密码:fiqs)
1.前言
dwr.util提供了两个函数帮助我们处理HTML表格操作,这两个函数是addRows()和removeAllRows().其中用于向表格添加行,而removeAllRows用于删除表格中的全部行。两个函数的语法格式如下:
1) dwr.util.removeAllRows(tableId):该函数只有一个参数,该参数是一个HTML表格元素的id属性值。
2) dwr.util.addRows(tableId,arry,funArray,[option]):该函数的第一个参数与removeAllRows函数的参数相同;第二个参数是个数组,每个数组元素对应表格增加一行;第三个参数是个函数数组,每个函数的返回值对应表格的一列;第四个参数可选的选项,用于指定更复杂的选项。
2.例子
<!DOCTYPE html>
<html>
<head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> util.js测试 </title>
</head>
<body>
<table width="400" border="1">
<tr>
<th>城市一</th>
<th>城市二</th>
<th>城市三</th>
</tr>
<tbody id="test"></tbody>
</table>
<input type="button" value="添加行" οnclick="add();" />
<input type="button" value="删除行" οnclick="del();" />
<script src="../util.js" type="text/javascript"></script>
<script type="text/javascript">
// 提供一个JSON对象作为表格内容, JSON对象的每个属性值都是数组
var rowArr = {中国城市:['广州','上海','北京'],美国城市:['加州','华盛顿','纽约'],英国城市:['利物浦','伦敦','伯明翰']
};
// 表格函数数组,每个函数可访问JSON对象的属性值
var cellfuncs = [
function(data){ return data[0];
},
function(data){return data[1];
},
function(data){return data[2];
}];
// 创建表格的高级选项
var option =
{// 指定rowCreator选项rowCreator:function(options){var row = document.createElement("tr");// 如果当前行索引为偶数,设置其背景色if(options.rowNum % 2 == 0){row.style.backgroundColor = "#bbbbbb";}return row;},// 指定cellCreator选项cellCreator:function(options){var cell = document.createElement("td");// 根据当前列索引设置前景色var index = options.cellNum * 80;cell.style.color = "rgb(" + index + "," + index + "," + index + ")";return cell;}
};
// 添加表格行
function add()
{dwr.util.addRows("test" , rowArr , cellfuncs , option);
}
function del()
{dwr.util.removeAllRows("test");
}
</script>
</body>
</html>
3.运行结果
使用util.js处理表格相关推荐
- OpenLayers辅助函数Util.js(三)
Util.js文件包括了OpenLayers库中的辅助通用函数. Util.getElement 获取一个HTMLELement元素,类似prototype库中$函数.如果window.$不存在, ...
- js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)
***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...
- jquery.dataTable.js 绘制表格使用详解
dataTable.js绘制表格真的是很不错,下面看看如何应用吧. 先导入dataTable.js的库吧! 定义html页面. <div><div id="result&q ...
- vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 选择 用户名 学号 班级 操作 {{item.User ...
- php对表格的处理,JavaScript_js处理表格对table进行修饰,js处理表格 1、行颜色间隔显示 - phpStudy...
js处理表格对table进行修饰 js处理表格 1.行颜色间隔显示 css样式:两个选择器 .one{ background-color:#33ffcc; } .two{ backgound-colo ...
- (转)用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
- html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法 本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
- 基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
- JS打印表格时边框缺失问题
问题描述: JS打印表格时边框缺失问题 项目场景:window.print()打印网页,预览中,表格的边框缺失部分或全部 原因分析: 首先,怀疑是设置了border-collapse:collapse ...
- html设置表格点击变色,js实现表格变色点击行颜色改变
forword js实现表格变色点击行颜色改变 table table { border-top:1px solid black; border-left:1px solid b ...
最新文章
- 视频监控智能算法的关键问题分析
- C#自定义工业控件开发
- 一些带dga域名的恶意软件
- 目标检测比赛中的 trick
- 云计算中的Big Iron重新成为时尚
- 九宫格拼图 支持44 55等
- 浙江大学PAT上机题解析之1008. 数组元素循环右移问题 (20)
- FreeSwitch +fusionpbx安装和基本使用
- 【三维路径规划】基于matlab人工蜂群算法无人机三维路径规划【含Matlab源码 021期】
- 阿里电话面试题(附答案)
- Python3对多股票的投资组合进行分析
- kali的vmtool工具安装
- matlab用割线法,Todd’s Matlab讲义第6讲:割线法
- 国产开源「文本-视频生成」模型!免费在线体验,一键实现视频生成自由
- SD卡bus speed-Default speed/Default high speed/UHS-1/UHS-2/UHS-3
- windows快速回到桌面快捷键
- 一文学会LaTeX基础
- 运放基本结构及频响(一)
- 报错 -Uncaught ReferenceError: axios is not defined
- 大数据测试平台搭建记录(CDH集群)