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

来源：互联网发布：xnview中文版官方 mac 编辑：程序博客网时间：2024/05/01 09:39

最近正在学习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.rowIndexvar y = document.getElementById('mytable').rows[x].cellsfor(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>