js实现table添加行tr、删除行tr、清空行tr的简单实例
更新时间:2016年10月15日 12:22:04 投稿:jingxian
下面小编就为大家带来一篇js实现table添加行tr、删除行tr、清空行tr的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME= "Generator" CONTENT= "EditPlus" > <META NAME= "Author" CONTENT= "" > <META NAME= "Keywords" CONTENT= "" > <META NAME= "Description" CONTENT= "" > <script language= "javascript" > // Example: obj = findObj("image1"); function findObj(theObj, theDoc) { var p, i, foundObj; if (!theDoc) theDoc = document; if ( (p = theObj.indexOf( "?" )) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if (!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } //添加一个参与人填写行 function AddSignRow(){ //读取最后一行的行号,存放在txtTRLastIndex文本框中 var txtTRLastIndex = findObj( "txtTRLastIndex" ,document); var rowID = parseInt(txtTRLastIndex.value); var signFrame = findObj( "SignFrame" ,document); //添加行 var newTR = signFrame.insertRow(signFrame.rows.length); newTR.id = "SignItem" + rowID; //添加列:序号 var newNameTD=newTR.insertCell(0); //添加列内容 newNameTD.innerHTML = newTR.rowIndex.toString(); //添加列:姓名 var newNameTD=newTR.insertCell(1); //添加列内容 newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />" ; //添加列:电子邮箱 var newEmailTD=newTR.insertCell(2); //添加列内容 newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />" ; //添加列:电话 var newTelTD=newTR.insertCell(3); //添加列内容 newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />" ; //添加列:手机 var newMobileTD=newTR.insertCell(4); //添加列内容 newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />" ; //添加列:公司名 var newCompanyTD=newTR.insertCell(5); //添加列内容 newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />" ; //添加列:删除按钮 var newDeleteTD=newTR.insertCell(6); //添加列内容 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>" ; //将行号推进下一行 txtTRLastIndex.value = (rowID + 1).toString() ; } //删除指定行 function DeleteSignRow(rowid){ var signFrame = findObj( "SignFrame" ,document); var signItem = findObj(rowid,document); alert(rowid); //获取将要删除的行的Index var rowIndex = signItem.rowIndex; //删除指定Index的行 signFrame.deleteRow(rowIndex); //重新排列序号,如果没有序号,这一步省略 for (i=rowIndex;i<signFrame.rows.length;i++){ signFrame.rows[i].cells[0].innerHTML = i.toString(); } } //清空列表 function ClearAllSign(){ if (confirm( '确定要清空所有参与人吗?' )){ var signFrame = findObj( "SignFrame" ,document); var rowscount = signFrame.rows.length; //循环删除行,从最后一行往前删除 for (i=rowscount - 1;i > 0; i--){ signFrame.deleteRow(i); } //重置最后行号为1 var txtTRLastIndex = findObj( "txtTRLastIndex" ,document); txtTRLastIndex.value = "1" ; //预添加一行 AddSignRow(); } } </script> </HEAD> <BODY> <div> <table width= "613" border= "0" cellpadding= "2" cellspacing= "1" id= "SignFrame" > <tr id= "trHeader" > <td width= "27" bgcolor= "#96E0E2" >序号</td> <td width= "64" bgcolor= "#96E0E2" >用户姓名</td> <td width= "98" bgcolor= "#96E0E2" >电子邮箱</td> <td width= "92" bgcolor= "#96E0E2" >固定电话</td> <td width= "86" bgcolor= "#96E0E2" >移动手机</td> <td width= "153" bgcolor= "#96E0E2" >公司名称</td> <td width= "57" align= "center" bgcolor= "#96E0E2" > </td> </tr> </table> </div> <div> <input type= "button" name= "Submit" value= "添加参与人" onclick= "AddSignRow()" /> <input type= "button" name= "Submit2" value= "清空" onclick= "ClearAllSign()" /> <input name= 'txtTRLastIndex' type= 'hidden' id= 'txtTRLastIndex' value= "1" /> </div> </BODY> </HTML> |
删除行 用下面的方法比较好……
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <html> <head> <title>1</title> <script> //得到行对象 function getRowObj(obj) { var i = 0; while (obj.tagName.toLowerCase() != "tr" ){ obj = obj.parentNode; if (obj.tagName.toLowerCase() == "table" ) return null ; } return obj; } //根据得到的行对象得到所在的行数 function getRowNo(obj){ var trObj = getRowObj(obj); var trArr = trObj.parentNode.children; for ( var trNo= 0; trNo < trArr.length; trNo++){ if (trObj == trObj.parentNode.children[trNo]){ alert(trNo+1); } } } //删除行 function delRow(obj){ var tr = this .getRowObj(obj); if (tr != null ){ tr.parentNode.removeChild(tr); } else { throw new Error( "the given object is not contained by the table" ); } } </script> </head> <body> <table border = "1" > <tr> <td>A<input type= "button" value= "A" onclick= "getRowNo(this)" >getRowNo<td> </tr> <tr> <td>B<input type= "button" value= "B" onclick= "delRow(this)" >delRow<td> </tr> <tr> <td>C<input type= "button" value= "C" onclick= "getRowNo(this)" >getRowNo</td> </tr> <tr> <td>D<input type= "button" value= "D" onclick= "getRowNo(this)" >getRowNo</td> </tr> </table> </body> <html> |
以上就是小编为大家带来的js实现table添加行tr、删除行tr、清空行tr的简单实例全部内容了,希望大家多多支持脚本之家~
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码...2007-04-04js 获取页面高度和宽度兼容 ie firefox chrome等
这篇文章主要介绍了js如何获取页面高度和宽度并且兼容ie firefox chrome等主流浏览器2014-05-05
最新评论