素材网 素材网

js制作动态创建table行与修改等编辑表单功能特效

下载资源()次

阅读次数()次

发布时间:2014-06-06

js制作动态创建table行与修改等编辑表单功能特效
分享到:

用法简介:

来源:xw素材网

js制作动态创建table行与修改等编辑表单功能特效。
文件引用:

<script type="text/javascript">
//Create TR
var nName = new Array("Tony","Mika","Neo","Oi","Kim","Park","Mr Lee","Tasky","Saco","Novel");
var nSex = new Array("男性","女性","保密");
var i = 1;
function CreateTB(){
	var oTB = document.getElementById("TB");
	var oTR = oTB.insertRow(oTB.rows.length);
	var oTD1 = oTR.insertCell(0);
	oTD1.innerHTML = "<input type='checkbox' name='ck'>";
	var oTD2 = oTR.insertCell(1);
	oTD2.innerHTML = "<div>" + nName[parseInt(Math.random()*10)] + "</div><center><input type='text' style='display:none; width:99%; height:22px; text-align:center;'></center>";
	var oTD3 = oTR.insertCell(2);
	oTD3.innerHTML = "<div>" + parseInt(Math.random()*50+15) + "</div><center><select name='age' class='select' style='display:none;'></select></center>";
	var oTD4 = oTR.insertCell(3);
	oTD4.innerHTML = "<div>" + nSex[parseInt(Math.random()*3)] + "</div><center><select name='sex' class='select' style='display:none;'></select></center>";
	var oTD5 = oTR.insertCell(4);
	oTD5.innerHTML = "<input type='button' value='修改' onclick=\"edit(this,'show')\"><input type='button' value='删除' onclick='del(this)'>";
i++;
}
//EDIT TR
function edit(o,otype){
	var oTR=o.parentNode.parentNode;
	var oDiv1=oTR.cells[1].getElementsByTagName("div");
	var oDiv2=oTR.cells[2].getElementsByTagName("div");
	var oDiv3=oTR.cells[3].getElementsByTagName("div");
	var oInpt1=oTR.cells[1].getElementsByTagName("input");
	var oselect2=oTR.cells[2].getElementsByTagName("select");
	var oselect3=oTR.cells[3].getElementsByTagName("select");
	if (otype =="show"){
		o.value="确认";
		o.setAttribute("onclick","edit(this,'hide')");
		//名字修改前
		oInpt1[0].value = oDiv1[0].childNodes[0].nodeValue;
		oInpt1[0].style.display = "block";
		oDiv1[0].style.display = "none";
		//年龄修改前
		oDiv2[0].style.display = "none";
		var iSage = parseInt(oDiv2[0].childNodes[0].nodeValue);
		oselect2[0].style.display = "block";
		if (oselect2[0].length == 0){
			for (var i=0; i<50; i++){
				oselect2[0].options.add(new Option(i+15,i+15)); 
			}
			oselect2[0].options[iSage-15].selected = true;
		}
		//性别修改前
		oDiv3[0].style.display = "none";
		oselect3[0].style.display = "block";
		if (oselect3[0].length == 0){
			for (var i=0; i<nSex.length; i++){
				oselect3[0].add(new Option(nSex[i],i));
			}
			switch (oDiv3[0].childNodes[0].nodeValue){
			case '男性':
			var iSno = 0;
			break;
			case '女性':
			var iSno = 1;
			break;
			case '保密':
			var iSno = 2;
			break;
			}
			oselect3[0].options[iSno].selected = true;
		}
	}else if (otype =="hide"){
		o.value="修改";
		o.setAttribute("onclick","edit(this,'show')");
		//名字修改后
		oDiv1[0].childNodes[0].nodeValue = oInpt1[0].value;
		oDiv1[0].style.display = "block";
		oInpt1[0].style.display = "none";
		//年龄修改后
		oDiv2[0].childNodes[0].nodeValue = oselect2[0].value;
		oDiv2[0].style.display = "block";
		oselect2[0].style.display = "none";
		//性别修改后
		oDiv3[0].childNodes[0].nodeValue = nSex[oselect3[0].value];
		oDiv3[0].style.display = "block";
		oselect3[0].style.display = "none";
	}
}
//Delete TR
function del(o){
	var oTB = document.getElementById("TB");
	var oInpt = oTB.getElementsByTagName("input");
	if (o == 'chk')
	{
		for (var i=1; i<oInpt.length ; i++)
		{
			if (oInpt[i].type == 'checkbox' && oInpt[i].checked)
			{
				var oRow = oInpt[i].parentNode.parentNode.sectionRowIndex;
				oTB.deleteRow(oRow);
				i--;
			}
		}
	}else{
		var oDel = o.parentNode.parentNode.sectionRowIndex;
		oTB.deleteRow(oDel);
	}
}
//Check All
function chk(type,o){
	var oInpt = document.getElementsByTagName("input");
	for (var i=0; i<oInpt.length; i++){
		if (oInpt[i].type == "checkbox"){
			oInpt[i].checked = o.checked;
		}
	}
}
//Check Fan
function chkFun(){
	var oTB = document.getElementById("TB");
	var oInpt = oTB.getElementsByTagName("input");
	for (var i=1; i<oInpt.length; i++){
		if (oInpt[i].type == "checkbox"){
			if (oInpt[i].checked)
			{
				oInpt[i].checked = false;
			}else{
				oInpt[i].checked = true;
			}
		}
	}
}
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。