javascript 动态表格可新增删除表格行移动行

最新推荐文章于 2024-02-16 21:44:50 发布

xjwqz

最新推荐文章于 2024-02-16 21:44:50 发布

阅读量180

点赞数

文章标签： JavaScript Firefox 浏览器 HTML ViewUI

javascript 动态表格可新增删除表格行移动行

注释少了点 :lol:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>new document</title>

</head><body>
 <table id="data" style="border: 2px solid rgb(255, 255, 255); width: 300px;  background-color: #FFFFCC;" >
 <tbody>
	<tr value="text"onmouseover="this.style.background='#CDE7FF';" onmouseout="this.style.background='';"><td>text:</td><td>text</td><td><input type="button" value="删除" onclick="d()" style="cursor:pointer;"><input type="button" value="↑" onclick="mu()" style="cursor:pointer;"><input type="button" value="↓" onclick="md()" style="cursor:pointer;"></td></tr>
	<tr value="link" onmouseover="this.style.background='#CDE7FF';" onmouseout="this.style.background='';"><td>link:</td><td><a href="#" onclick="return false;">linkName</a></td><td><input type="button" onclick="d()" value="删除" style="cursor:pointer;"><input type="button" value="↑" onclick="mu()" style="cursor:pointer;"><input type="button" value="↓" onclick="md()" style="cursor:pointer;"></td></tr>
</tbody>
</table>
<input type="button" value="增加文本" onclick="iT();" />
<input type="button" value="增加链接" onclick="iL();" />
<input type="button" value="获取值" onclick="s();" />
<SCRIPT LANGUAGE="JavaScript">
<!--
	/*

	*/
    var tb = document.getElementById("data").tBodies[0];
	var len = tb.rows.length;
	function s(){
	 var tt = tb.rows;
	 var temp = '';
	 for(var i = 0 ;i<tt.length;i++)
	 {
	    //alert(tt[i].value);
		temp += tt[i].value+":"
	 }
	 alert(temp);
	}
	function d()
	{
	    var s = event.srcElement;
		var _tr = s.parentNode.parentNode;
		//alert(_tr.rowIndex);
		tb.deleteRow(_tr.rowIndex);
		//tb.removeChild(_tr);
	}
	function md()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			var index = _tr.rowIndex
			if(index!=tb.rows.length-1)
			{
				tb.moveRow(index,index+1);		
			}else{
			alert("已经是最下面了")
			}			
		}
	function mu()
	{
	  var s = event.srcElement;
	  var _tr = s.parentNode.parentNode;
	  var index = _tr.rowIndex
	  if(index!=0)
	 {
				tb.moveRow(index,index-1);			
	 }else{
			alert("已经是最上面了")
			}
	}
	function iT()
	{	
		len++;
		var _tr = document.createElement("tr");
		_tr.onmouseover = function(){	this.style.background="#CDE7FF";};	
		_tr.onmouseout =  function(){	this.style.background="";};
		_tr.value = "test"+len;
		//_tr.setAttribute('value',"test");
		var td1 = document.createElement("td");
		var td2 = document.createElement("td");
		var td3 = document.createElement("td");
		var text1 = document.createTextNode("text:");
		var text2 = document.createTextNode("test "+len);
		var   bTxt   =   document.createElement("input");
		bTxt.type    =   "button";
		bTxt.value   =   "删除";
		bTxt.onclick = function ()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			//alert(_tr.rowIndex);
			tb.deleteRow(_tr.rowIndex);
		}
		var   mdb   =   document.createElement("input");
		mdb.type    =   "button";
		mdb.value   =   "↓";
		mdb.onclick = function ()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			var index = _tr.rowIndex
			if(index!=tb.rows.length-1)
			{
				tb.moveRow(index,index+1);		
			}else{
			alert("已经是最下面了")
			}
		}
		var   mub   =   document.createElement("input");
		mub.type    =   "button";
		mub.value   =   "↑";
		mub.onclick = function ()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			var index = _tr.rowIndex
			if(index!=0)
			{
				tb.moveRow(index,index-1);			
			}else{
			alert("已经是最上面了")
			}

		}
		tb.insertBefore(_tr,null);
		_tr.insertBefore(td1,null);
		td1.insertBefore(text1,null);
		_tr.insertBefore(td2,null);
		td2.insertBefore(text2,null);
		_tr.insertBefore(td3,null);
		td3.insertBefore(bTxt,null);
		td3.insertBefore(mub,null);
		td3.insertBefore(mdb,null);

		//alert(_tr.innerHTML);
		//alert(tb.innerHTML);
	}
	function iL()
	{	
		len++;
		var _tr = document.createElement("tr");
		_tr.onmouseover = function(){	this.style.background="#CDE7FF";};	
		_tr.onmouseout =  function(){	this.style.background="";};
		_tr.value = "testlink"+len;
		var td1 = document.createElement("td");
		var td2 = document.createElement("td");
		var td3 = document.createElement("td");
		var _a = document.createElement("a");
		_a.href= "#";
		_a.onclick = function (){return false;};
		_a.innerHTML = ("linknametest "+len);
		var text1 = document.createTextNode("link:");
		var   bTxt   =   document.createElement("input");
		bTxt.type    =   "button";
		bTxt.value   =   "删除";
		bTxt.onclick = function ()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			//alert(_tr.rowIndex);
			tb.deleteRow(_tr.rowIndex);
		}
		var   mdb   =   document.createElement("input");
		mdb.type    =   "button";
		mdb.value   =   "↓";
		mdb.onclick = function ()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			var index = _tr.rowIndex
			if(index!=tb.rows.length-1)
			{
				tb.moveRow(index,index+1);		
			}else{
			alert("已经是最下面了")
			}
		}
		var   mub   =   document.createElement("input");
		mub.type    =   "button";
		mub.value   =   "↑";
		mub.onclick = function ()
		{
			var s = event.srcElement;
			var _tr = s.parentNode.parentNode;
			var index = _tr.rowIndex
			if(index!=0)
			{
				tb.moveRow(index,index-1);			
			}else{
			alert("已经是最上面了")
			}

		}
		tb.insertBefore(_tr,null);
		_tr.insertBefore(td1,null);
		td1.insertBefore(text1,null);
		_tr.insertBefore(td2,null);
		td2.insertBefore(_a,null);
		_tr.insertBefore(td3,null);
		td3.insertBefore(bTxt,null);
		td3.insertBefore(mub,null);
		td3.insertBefore(mdb,null);
		//alert(_tr.innerHTML);
		//alert(tb.innerHTML);
	}
//-->
</SCRIPT>
 </body></html>