JavaScript对table的操作

最新推荐文章于 2024-07-16 16:43:05 发布

djytotti

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量98

点赞数

分类专栏： Web 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/djytotti/article/details/83976193

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<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    名称    单位}<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>

djytotti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对table的操作

[code="java"]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(...
复制链接

扫一扫