点击按钮添加一行，Ajax无刷新删除一行JS代码

发布时间：2018-08-17 14:22:27 所属栏目：Unix 来源：站长网

导读：点击按钮添加一行，Ajax无刷新删除一行JS代码，Ajax无刷新添加、删除数据的小例子。这是比较常用的网页小特效，我们在平时经常会遇到的，代码看上去并不复杂，因此对于学习 Java Script的人来说，是个不错的参考例子。示例： html xmlns=http://www.w3.or

　　点击按钮添加一行，Ajax无刷新删除一行JS代码，Ajax无刷新添加、删除数据的小例子。这是比较常用的网页小特效，我们在平时经常会遇到的，代码看上去并不复杂，因此对于学习JavaScript的人来说，是个不错的参考例子。

　　示例：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Js点击自动添加行-www.codefans.net</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"> var count = 0; function Add(){ count += 1; var File1 = document.getElementById("file1"); var div = document.createElement("div"); var countTxtgui_ze= document.createTextNode("规则"+count+"："); var countTxtxie_yi = document.createTextNode(" "+"协议"+" "); var select1 = document.createElement("<select name=protocol_value></select>"); var ooption1 = new Array(); ooption1[0] = "tcp"; ooption1[1] = "udp"; ooption1[2] = "ip"; ooption1[3] = "ether"; for(var i=0;i<4;i++){select1.options[i] = new Option(ooption1[i], ooption1[i]);} var countTxtshu_ju_bao_fang_xiang = document.createTextNode(" "+"数据包方向"+" "); var select2 = document.createElement("<select name=direction_value></select>"); var ooption2 = new Array(); ooption2[0] = "src"; ooption2[1] = "dst"; ooption2[2] = "src_or_dst"; ooption2[3] = "src_and_dst"; for(var i=0;i<4;i++){select2.options[i] = new Option(ooption2[i], ooption2[i]);} var countTxtxing_shi = document.createTextNode(" "+"形式"+" "); var select3 = document.createElement("<select name=type_value></select>"); var ooption3 = new Array(); ooption3[0] = "ip"; ooption3[1] = "port"; for(var i=0;i<2;i++){select3.options[i] = new Option(ooption3[i], ooption3[i]);} var inputTxtveryhuo = document.createElement("input"); inputTxtveryhuo.type = "text"; inputTxtveryhuo.name = "ip_or_port_value"; var countTxtkong_ge1=document.createTextNode(" "); var select4 = document.createElement("<select name=conjunction_value></select>"); var ooption4 = new Array(); ooption4[0] = "0"; ooption4[1] = "or"; ooption4[2] = "and"; ooption4[3] = "not"; for(var i=0;i<4;i++){select4.options[i] = new Option(ooption4[i], ooption4[i]);} var countTxtkong_ge2=document.createTextNode(" "); var btn = document.createElement("input"); btn.type = "button"; btn.name= "delete" btn.value = "删除"; btn.onclick = function() { this.parentNode.parentNode.removeChild(this.parentNode); var n = File1.getElementsByTagName("div"); for(var k=0; k<n.length; k++) { n[k].firstChild.nodeValue = "规则"+(k+1)+"："; } count -= 1; } div.appendChild(countTxtgui_ze); div.appendChild(countTxtxie_yi); div.appendChild(select1); div.appendChild(countTxtshu_ju_bao_fang_xiang); div.appendChild(select2); div.appendChild(countTxtxing_shi); div.appendChild(select3); div.appendChild(inputTxtveryhuo); div.appendChild(countTxtkong_ge1); div.appendChild(select4); div.appendChild(countTxtkong_ge2); div.appendChild(btn); File1.appendChild(div); } </script> </head> <body onload="Add()"> <form id="zhua_bao" name="zhua_bao" method="post" action="create_sniffer_config.jsp"> <div id="file1"> </div> <br/> <input name="add" id="1" value="AddLine" type="button" onclick="Add()"/> <input name="submit" type="submit" value="提交"/> <input name="reset" type=reset value="清空"/> </form> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：云计算网_宿迁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!