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);//对电话号码进行校验  邮箱的也一样

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