对表格行动态增删除的JS封装

来老师

2013-04-26

这是最近在公司项目中使用的，一个对表格行进行动态增加和删除的javascript的封闭，公司的表格比较复杂，此处仅做了一个简单实用例子。

以下是JSP代码：

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
   <title>HelloWorld</title>
   <style type="text/css">
	body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72;  background: #E6EAE9; } 
	a {color: #c75f3e;} 
	#mytable {width:700px;padding:0;margin:0;} 
	caption {padding: 0 0 5px 0; width: 700px; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: right;} 
	th { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA url(images/bg_header.jpg) no-repeat; } 
	th.nobg { border-top:0; border-left: 0; border-right: 1px solid #C1DAD7; background: none; } 
	td {border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; font-size:11px; padding: 6px 6px 6px 12px;   color: #4f6b72; } 
	td.alt {background: #F5FAFA; color: #797268;} 
	th.spec {border-left: 1px solid #C1DAD7; border-top: 0;  background: #fff url(images/bullet1.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }  
	th.specalt {border-left: 1px solid #C1DAD7;  border-top: 0;  background: #f5fafa url(images/bullet2.gif) no-repeat;  font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;  color: #797268;}
	.button{border: #93bee2 1px solid; font-family:"tahoma","宋体";font-size:9pt; color:#006699; background-color:#e8f4ff; cursor: hand;  font-style: normal ;width:60px;height:25px;padding-top:1px;} 
   </style>
   <script type="text/javascript">
    
    	var Customer = {
    		container:null,
    		datalist:[],
    		setContainer:function(container){
    			this.container = document.getElementById(container);
    		},
    		setDatalist:function(data){
    			if(data){
    				this.datalist=data;
    			}else{
    				this.datalist=[];
    			}
    		},
    		addNew:function(){ 
    			var obj={cusid:'',cusname:'',username:''};
	    		this.datalist.push(obj);
				this.refresh();
    		},
    		delRow:function(index){
    			if(confirm("就否确定要删除该记录？")){
    				this.datalist.splice(index,1);
    				this.refresh();
    			}
    		},
    		refresh:function(){ 
    			var len = this.datalist.length;
    			var htm="<table border='0' align='center' cellspacing='1' cellpadding='0' width='700px'   id='mytable' >";
    				htm+="<caption>动态表格操作JS封装</caption>";
    				htm+="<tr>"
    				htm+="<th scope='col' abbr='序号'>序号</th>";
    				htm+="<th scope='col' abbr='产品ID'>产品ID</th>";
    				htm+="<th scope='col' abbr='产品名称'>产品名称</th>";
    				htm+="<th scope='col' abbr='使用人'>使用人</th>";
    				htm+="<th scope='col' abbr='操作'>操作</th>";
    				htm+="</tr><tbody>"
    			for(var i=0;i<len;i++){
    				objX = this.datalist[i];
    				var tdcss = "class='alt'";
    				if(i==0||i%2==0){
    					htm += "<tr><th scope='row' abbr='"+(i+1)+"' class='spec'>"+(i+1)+"</th> ";
    					tdcss="";
    				}else{
    					htm += "<tr> <th scope='row' abbr='"+(i+1)+"' class='specalt'>"+(i+1)+"</th>";
    					tdcss = "class='alt'";
    				}
	    			htm += "<td "+tdcss+"><input type='text' name='cusname"+i+"'  id='cusname"+i+"'  size='20' value='"+objX.cusname+"'  onblur='Customer.insertdata(this,\"cusname\","+i+")'></td>";
    				htm += "<td "+tdcss+"><input type='text' name='cusid"+i+"'    id='cusid"+i+"'  	 size='20' value='"+objX.cusid+"' onblur='Customer.insertdata(this,\"cusid\","+i+")'></td>";
    				htm += "<td "+tdcss+"><input type='text' name='username"+i+"' id='username"+i+"' size='20' value='"+objX.username+"' onblur='Customer.insertdata(this,\"username\","+i+")'></td>";
    				if(i==0){
    	    			htm += "<td "+tdcss+"><input type='button' value='添加' onclick='javascript:Customer.addNew();' class='button'></td>";
    				}else{
        				htm += "<td "+tdcss+"><input type='button' value='删除' onclick='javascript:Customer.delRow("+i+");' class='button'></td>";   				
        			}
    				htm += "</tr>";
    			}
    			htm += "</tbody></table>";
    			this.container.innerHTML=htm;
    		},
    		insertdata:function(obj,flag,index){ 
	    		var objX = this.datalist[index];
				if(flag=="cusid"){
					objX.cusid = obj.value;
				}
				if(flag=="cusname"){ 
					objX.cusname =  obj.value;
				}
				if(flag=="username"){ 
					objX.username =  obj.value;
				}
    		}
    	};
    	window.onload=function(){
    		Customer.setContainer("mytest");
    		Customer.addNew();
    	};
    </script>
</head>

<body>
	<div id="mytest"></div>
</body>
</html>

效果如图所示：
对表格行动态增删除的JS封装