使用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="添加行" onclick="add();" />
<input type="button" value="删除行" onclick="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处理表格_第1张图片


你可能感兴趣的:(JavaScript,web开发,DWR)