js添加行删除行，遍历table

fly533

浏览: 107945 次
性别:
来自: 广西

最近访客更多访客>>

beokwithanything

Eric.Yan

itxxz

wangjn1130

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB应用

数据结构 J#HTML

//需求：js实现多条记录的更新
//1、从页面的表格A中，选择商品添加到表格B中，
//2、表格B中，对应每条商品，输入数量。
//3、表格B中的商品不能重复，可以删除。
//4、能同时传入后台，更新到数据库
//5、或传入其他页面，并显示出来。
//js通过添加表的一行，删除一行。遍历表结构等方法实现
//可修改为其他功能：
//多条记录同时修改并且更新到数据库

<html>
<script language="JavaScript">
var i=0;//行的id 
var num;
var tdname;
var unit; 
var list= new Array(); 
var numList=new Array();
var flag=true;

function addRow(){//添加行
 var table=document.getElementById("table");
 var length=table.rows.length; 
 var tr=document.createElement("tr"); 
 tr.id=++i;
  
 var td0=document.createElement("td");
 td0.innerHTML="<input type=\"text\" value=\""+num+"\"/>";//不用文本框下面取不出来。 （因遍历的方式需要不带文本框）
 tr.appendChild(td0); 
 
 var td1=document.createElement("td");
 tdname="第"+i+"行 "+tdname;
 td1.innerHTML="<input type=\"text\" value=\""+tdname+"\" name=\"name\" id=\"name\"/>";
 tr.appendChild(td1);
     
	var td2=document.createElement("td");
	td2.innerHTML="<input type=\"text\" value=\""+unit+"\" name=\"unit\"/>"; 　　
	tr.appendChild(td2);
	 
	var td3=document.createElement("td"); 
	//td3.id=tr.id; 
	td3.innerHTML="<input type=\"button\" value=\"del\" onclick=\"del(this.parentElement.parentElement,this.parentElement.parentElement.id)\"/>"; 　　
	tr.appendChild(td3); 　　
	
	addData(i);//含数据验证 
	if(flag==true){ 
	document.getElementById("newbody").appendChild (tr); 
	}else{ 
	i--; 
	} 
} 

function del(src,index){ 
	var tr=document.getElementById(index); 
	tr.parentNode.removeChild(tr); 
	delData(index); 
} 

function addData(rid){ 
	flag=true; 
	for(var i=0;i<=numList.length;i++){
		if(num==numList[i]){ 
			flag=false; 
 			alert("该名称您已经添加！请查看已添加的列表。"); 
 		} 
 	} 
	if(flag==true){ 
 		numList[numList.length]=num; 
 		var str="{"+num+","+tdname+","+unit+"}"; 
 		list[rid]=str; 
 	} 
 }
  
function delData(rid){ list[rid]=""; }

function getList(){ 
	var jsonStr="{check:["; 
	var showStr="{ID&nbsp;&nbsp;&nbsp;&nbsp;名称&nbsp;&nbsp;&nbsp;&nbsp;单位}<br>" 
	var s=""; 
	for(var i=0;i<=list.length;i++){ 
		s=list[i]; 
		if(s!=""){ 
			if(s!=undefined){ 
				jsonStr+=list[i]+","; 
				showStr+=list[i]+"<br>"; 
			} 
		} 
	} 
	jsonStr=jsonStr.substring(0,jsonStr.length-1);
	jsonStr+="]}"; 
	//alert("结果:"+jsonStr); 
	var contain=document.getElementById("div1"); 
	contain.innerHTML=jsonStr+"<br>"+showStr; 
}

function getTable(){ 
	var tableObj = document.getElementById("table"); 
	//alert(tableObj.rows.length+"/"+tableObj.rows[0].cells.length+"/"+tableObj.rows[0].cells[0].children.length); 
	//alert(tableObj.rows[1].cells[0].children[0].value); 
	var str = "<table border=\"1\"><tr><td>ID</td><td>名称</td><td>单位</td></tr>"; 
	for(var i=0;i<tableObj.rows.length;i++){//行 
		str+="<tr>"; 
		for(var j=0;j<tableObj.rows[i].cells.length-1;j++){//列 
			for(var z=0;z<tableObj.rows[i].cells[j].children.length;z++){ 
				var text = tableObj.rows[i].cells[j].children[z];//取得text object 
				str +="<td>"+text.value+"</td>"; 
			} 
		} str+="</tr>"; 
	} 
	str+="</table>"; 
	//alert(str); 
	var contain=document.getElementById("div2"); 
	contain.innerHTML=str; 
	
	// var ob=document.getElementById("tb2").getElementsByTagName("input"); 
	// for(var j=0;j<ob.length;j++) 
	// { 
	// if(ob[j].type=="text") 
	// { 
	// jx+=j; 
	// } 
	//} 
}



function set(){ //该方法有问题。 
	var a=""; 
	//alert(document.getElementById(name)); 
	alert(document.find.name.length); 
	for(var i=0;i<document.find.name.length;i++){ 
		a+=document.find.name[i].value; 
		a=a+":"+document.find.unit[i].value+"/"; 
	} 
	//window.opener.document.getElementById("unit").value=uu; 
	alert("打印结果："+a); 
	//window.close(); 
}
</script>
<BODY> 
<form method="post" action="" name="find"> 
	<table id="table" border="1"> 
	<tr><td>ID</td><td>名称</td><td>单位</td> <td>删除</td> </tr>
 	<tbody id="newbody"></tbody>
	</table>
</form> 

<input type="button" onClick="getList()" value="getList"/> 
<input type="button" onClick="getTable()" value="getTable"/>
<div id="div1"></div>
<div id="div2"></div>
  
<table border="1" id="t1"> 
	<tr > <td>数据项</td> </tr> 
	<tr onMouseDown=" 
		num=this.cells.item(0).innerHTML; 
		tdname=this.cells.item(1).innerHTML; 
		unit=this.cells.item(2).innerHTML;" >
 <td>1</td><td>name1</td><td>unit1</td> 
 <td><input type="button" onClick="addRow()" value="addRow"/></td> </tr> 
	<tr onMouseDown=" 
		num=this.cells.item(0).innerHTML; 
 		tdname=this.cells.item(1).innerHTML; 
 		unit=this.cells.item(2).innerHTML;" > 
 <td>2</td><td>name2</td><td>unit2</td> 
 <td><input type="button" onClick="addRow()" value="addRow"/></td> </tr>
</table>
</BODY>
</html>

分享到：

自己用的CSS | JS修改Table中Td的值

2010-03-09 20:55
浏览 8444
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js添加行删除行，遍历table

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js添加行删除行，遍历table

评论

发表评论

相关推荐

通过修改tomcat的server.xml配置文件部署多个web工程，方法一

select,触发js同时取得option的value 和显示的名称

js 页面弹出层

java web 标签大全

netcotss_t4阿各地方

HTML 颜色图表

通用分页导航

weblogic 使用的问题

JavaScript鼠标点到文本框时的提示信息

java+js+jsp用户自定义字段查询

用JavaScript动态生成excel

用法比较简单的行高亮

自己用的CSS

JS修改Table中Td的值

最近访客更多访客>>