js对报表数据的增删改 _JavaScript

js对表格数据的增删改
这是一个简单的数据修改添加删除
1.添加修改点击按钮会弹出模态窗口对数据进行编辑
2.做了一些简单的校验用户名和密码不能为空电话3~5-8 邮箱英文和数字组合+@英文+.com 验证出生日期加了一个时间控件这个网上应该很多啦
3.页面在初始化的时候是从本地文件中读取json格式的文件动态的加载到tr td中的
4.点中复选框该行的文字会变成蓝色取消后恢复最初颜色；
5.可以批量的删除，点击全选后会删除所有的数据
这应该是个很简陋的作品啦但是涉及到了很多 js的知识可以简单的学习一下没有介绍原理性的东西主要还是实践
没有加入太多css的样式无奈本人缺少艺术细菌啊太多的代码大家可能不太愿意看那我说说实现的细节
下面看一下具体的实现过程
//主页面 index.html 初始化表格

<IE:Download ID="oDownload1" STYLE="behavior:url(#default#download)"/><!--加载本地文件 这个是ie自带的方法-->

function onDownloadDone1(downData){
	readTxt1=eval('('+downData+')');//读取json格式数据用eval解析成json对象
	
}
oDownload1.startDownload('json.txt',onDownloadDone1);
//json的数据格式类似
{person:[{userId:"admin",name:"name",password:"123"}，[{userId:"admin",name:"name",password:"123"}，[{userId:"admin",name:"name",password:"123"}]}

读取 person内是一个数组循环读出来就可以了比如readTxt1.person[i].userId;

//动态的生成表格 根据readTxt1.person.length 就可以判断生成多少行了

 var otr=getElelmentById('tableId').inserRow();
 var otd=otr.innsertCell();

//删除 单行删除
function deleteObj(obj){//obj是点击删除按钮的那个对象
	var otable1=document.getElementById('table1');
	//alert(otable1.outerHTML);
	//alert(obj.parentNode.parentNode.outerHTML);
	otable1.deleteRow(obj.parentElement.parentElement.rowIndex);
}
//删除 批量删除 需要判断选中的checkbox怎么判断呢  :D 其实很简单啦 只要获取checkbox的name属性值 循环遍历就可以了
function deleteSelectedAll(){
	var otable1=document.getElementById('table1');
	
	var checkboxSelectObj=document.getElementsByName('checkbox1');
	var len=checkboxSelectObj.length;
	for(var i=0;i<len;i++){
		//alert(checkboxSelectObj.length);
		var otbody=checkboxSelectObj[i].parentNode.parentNode.parentNode;
		var otr=checkboxSelectObj[i].parentNode.parentNode;
		if(checkboxSelectObj[i].checked==true){
				otbody.removeChild(otr);
				i--;//这个需要注意以下 每删除一行 获取checkbox的length就会减少一行
		}
	}
}

//好像改添加页面了点击添加弹出模态窗口进行添加信息

<input type="button" value="添加" onclick="addInfo()">
function addInfo()
{
	var obj={win:window}<!--传递当前窗口的对象-->
   var result = window.showModalDialog("add.html",obj,"dialogWidth:400px;dialogHeight:300px;");<!--弹出模态窗口 有三个参数 1.需要弹出窗口的url路径 可以使当前的相对路径，2.传递参数 3.模态窗口的一些属性值的设置-->
   
}

在添加页面add.html获取参数

var obj = window.dialogArguments;
var otable=obj.win.document.getElementById("table1");//这样就获取到了父窗口的table的id了 可以动态添加数据咯
//修改的页面和添加的差不多 需要将选中的数据传递到模态窗口 只要传递tr对象 然后将修改后的数据 传递个tr这个对象就好了 很简单的

关于正则简单的校验的校验还可以复杂的我是感觉相当的晕了

//电话号码 3~5-8位  
var reg=/^[0-9]{3,5}-[0-9]{8}$/;
//邮箱 
var reg2=/^(([0-9]+[a-zA-Z]+)|([a-zA-Z]+[0-9]+))@[a-zA-Z]+(\.com)$/;
var telObj=document.getElementById('telephoneId');
reg.test(telObj.value);//对电话号码进行校验  邮箱的也一样

我没有上传源码主要还是思路还有方法还是要自己去事实现的哦上传一个时间控件