创建含有按钮的动态表格（php+js+jquery+DOM）

最新推荐文章于 2024-07-13 04:42:46 发布

原创最新推荐文章于 2024-07-13 04:42:46 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #php #button #input #function #xhtml

本文记录了使用PHP、JavaScript和jQuery动态创建含有按钮的表格的过程，适合初学者参考，便于日后查阅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近正在学习php以及相关的一些知识，所以在这儿做个笔记，以后用到的时候也有个参照。

动态为 table增加,删除一行.

每一行后面有个Edit按钮.点先后,本行内的所有栏位变成 input , 并且input框内初始值为原先栏位的值.

以上是整个动态表格的要求，附带了一个小的动

态div的显示。

接下来附上源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>使用jquery和DOM创建HTML表格</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		var i=1,j=1;
		function start(){
			var mybody = document.getElementsByTagName("body")[0];
			var mytable = document.createElement("table");
			mytable.setAttribute("id","mytable");
			var mytablebody = document.createElement("tbody");
			//创建所有单元格
			for( j=1;j<5;j++){
				mycurrent_row = document.createElement("tr");
				for( i=1; i<6; i++){
				//创建一个<td>元素
			  	    mycurrent_cell=document.createElement("td");
				
					//创建一个文本节点
					currenttext=document.createTextNode(j+'-'+i);
					//将创建的文本节点初始化到<td>里
					mycurrent_cell.appendChild(currenttext);
					//将<td>添加到行<tr>
					mycurrent_row.appendChild(mycurrent_cell);
				}
				mycurrent_cell=document.createElement("td");
				mycurrent_cell.innerHTML='<input type="button" value="编辑" onclick="editRow(this)"><input type="button" value="删除" onclick="deleteRow(this)">';
				mycurrent_row.appendChild(mycurrent_cell);
				mytablebody.appendChild(mycurrent_row);
			}
			mytable.appendChild(mytablebody);
			mybody.appendChild(mytable);
			mytable.setAttribute("border","2");
		}
		function deleteRow(r)
		{
			var x=r.parentNode.parentNode.rowIndex;
			document.getElementById('mytable').deleteRow(x);
			j--;
		}
		function insRow()
		{
			var x=document.getElementById('mytable').insertRow(j-1)
			for( i=0; i<5; i++)
			{
				var y=x.insertCell(i);
				y.innerHTML= j+'-'+(i+1);
			}
			j++;
			var y=x.insertCell(i);
			y.innerHTML='<input type="button" value="编辑" onclick="editRow(this)"><input type="button" value="删除" onclick="deleteRow(this)">';
		}
		function editRow(r)
		{
			var x = r.parentNode.parentNode.rowIndex
			var y = document.getElementById('mytable').rows[x].cells
			for(i=0; i<5; i++)
			{
				y[i].innerHTML='<input  type="text" id='+x+'-'+i+' value='+y[i].innerHTML+'>';
			}
			y[i].innerHTML='<input type="button" value="保存" onclick="saveRow(this)">';
		}
		function saveRow(r)
		{
			var x=r.parentNode.parentNode.rowIndex;
			var y=document.getElementById('mytable').rows[x].cells;
			//获取当前单元格父节点对象
			var z=r.parentNode.parentNode;
			var tds = $(z).children("td");
			
			
			for(i=0; i<5; i++)
			{
				y[i].innerHTML=document.getElementById(x+'-'+i).value;
			}
			y[5].innerHTML='<input type="button" value="编辑" onclick="editRow(this)"><input type="button" value="删除" onclick="deleteRow(this)">';
		}
		function showDiv()
		{
			var windowWidth = document.documentElement.clientWidth;
			var windowHeight = document.documentElement.clientHeight;
			var tips='嘿嘿！这次能回到中间吗？';
			var tipsDiv='<div class="tipsClass">'+tips+'</div>';
			$('body').append(tipsDiv);
			$('div.tipsClass').css({
				'top':( windowHeight /2)-(tips.height/2)+'px',
				'left':( windowWidth /2)-(tips.length*13/2)+'px',
				'position':'absolute',
				'padding':'3px 5px',
				'background':'#8FBC8F',
				'font-size':12+'px',
				'margin':'0 auto',
				'text-align':'center',
				'width':'auto',
				'color':'#fff',
				'opacity':'0.8'
				}).show();
		}
			
		</script>
	
		
	</head>
	<body onload="start()">

 		<br />
		<input type="button" onclick="insRow()" value="插入行">
		<input type="button" onclick="showDiv()" value="显示DIV">
	</body>
</html>