首页 > 代码库 > html表格动态添加删除行(有后台操作)
html表格动态添加删除行(有后台操作)
<HTML> <TITLE>Form Object example</TITLE> <HEAD> <script language="javascript"> function delrow1() { var oElement=event.srcElement; while(oElement.tagName!="TR") { oElement=oElement.parentElement; } var oTBody=oElement.parentElement; oTBody.removeChild(oElement) }function delrow2()//刪除当前行 { var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex; document.all.yltable.deleteRow(currRowIndex);//table10--表格id } function insertrow2() //增加的一行方法2 { newRow=document.all.yltable.insertRow(-1); var j_1 = document.all.yltable.rows.length; newcell=newRow.insertCell(); newRow.bgColor='#FFFFFF'; newcell.align='center'; newcell.innerHTML=""+j_1+"";newcell=newRow.insertCell() ; newRow.bgColor='#FFFFFF';newcell.align='center'; newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";newcell=newRow.insertCell() ; newRow.bgColor='#FFFFFF';newcell.align='center';newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value=http://www.mamicode.com/"删除1"> ';>
运行截图:
上面这个只是个简单的demo,里面很多地方要根据实际需要改。
比如在用insertRow()添加时会先查看现有几行,然后给下一行赋id,deleteRow()是根据这个id进行删除的,所以一边添加一边删除的话会删错。
下面就看一下我在实际项目中的写法:
主要代码如下:var j_1=0; function callback(json){ //alert(json.id); //提交参数的回调函数 //表格添加一行 newRow=document.all.yltable.insertRow(-1); j_1++; newRow.id=json.id; newcell=newRow.insertCell(); newcell.className="cell"; //newRow.bgColor='#FFFFFF'; newcell.align='center'; //newcell.innerHTML=""; newcell.innerHTML="第"+j_1+"行"; newcell=newRow.insertCell(); //newRow.bgColor='#FFFFFF'; newcell.className="cell"; newcell.align='center'; newcell.innerHTML=json.paramname; newcell=newRow.insertCell() ; //newRow.bgColor='#FFFFFF'; newcell.className="cell"; newcell.align='center'; //alert(document.getElementById("aaaaa")) //newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value=http://www.mamicode.com/"删除1"> ';>
这里是表单提交后的一个回调函数 callback(json) 功能是添加一天信息动态显示到上面的表格 ,点删除先删除数据库信息,在让表格的这一行消失。界面:
这里面主要的难点是删除,要找到这一行。 我直接把后台传来的id当成这个按钮的id,找到按钮的父节点 ,删其子节点:
document.getElementById(a).parentNode.removeChild(document.getElementById(a));
这里费半天劲儿才能弄好,贴出来希望给大家帮助。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。