动态插入、添加删除表格行，JS特效代码

发布时间：2018-08-16 08:06:18 所属栏目：PHP教程来源：站长网

导读：动态插入、添加删除表格行，JS特效代码，在表格的指定位置插入多个新行，也可以删除添加的行，当然还可以在表格尾添加多个新行，也可以删除这些行。演示： htmlheadtitleTable对象的方法/titlescript language= Java Scriptvar intRowIndex = 0;function

　　动态插入、添加删除表格行，JS特效代码，在表格的指定位置插入多个新行，也可以删除添加的行，当然还可以在表格尾添加多个新行，也可以删除这些行。

　　演示：

<html> <head> <title>Table对象的方法</title> <script language="<b>Java</b>Script"> var intRowIndex = 0; function insertRow(tbIndex){ var objRow = myTable.insertRow(tbIndex); var objCel = objRow.insertCell(0); objCel.innerText = document.myForm.myCell1.value; var objCel = objRow.insertCell(1); objCel.innerText = document.myForm.myCell2.value; objRow.attachEvent("onclick", getIndex); objRow.style.background = "pink"; } function deleteRow(tbIndex){ myTable.deleteRow(tbIndex); } function getIndex(){ intRowIndex = event.srcElement.parentElement.rowIndex; pos.innerText = intRowIndex; } </script> </head> <body onload="pos.innerText=intRowIndex;"> <h2>Table对象的方法</h2> <hr> 当前位置 : <span id="pos"></span> <table id="myTable" border=1> <tr onclick="getIndex()"> <td>HTML</td> <td>CSS</td> </tr> <tr onclick="getIndex()"> <td>JavaScript</td> <td>VBScript</td> </tr> </table> <form name="myForm"> 第一栏 : <input type="text" name="myCell1" value="烈火学院"><br> 第二栏 : <input type="text" name="myCell2" value="liehuo.net"><br> <input type="button" onclick="insertRow(intRowIndex)" value="插入行"> <input type="button" onclick="deleteRow(intRowIndex)" value="删除行"> <input type="button" onclick="insertRow(myTable.rows.length);" value="添加行"> </form> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：衢州站长网）

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

php读取txt文件中文乱	PHP 获取远程文件大小
php多用户读写文件冲突	php简单创建zip压缩文