JavaScript动态插入、添加和删除单元格代码

发布时间：2018-08-15 19:42:30 所属栏目：PHP教程来源：站长网

导读：Java Script动态插入单元格、添加单元格和删除单元格，注意哦，添加单元格和插入单元格是不一样的，添加是在表格的后边，而插入是在表格的任意位置，这里主要是利用TableRow对象的方法来实现本效果。演示： htmlheadtitleTableRow对象的方法/titlescript

　　JavaScript动态插入单元格、添加单元格和删除单元格，注意哦，添加单元格和插入单元格是不一样的，添加是在表格的后边，而插入是在表格的任意位置，这里主要是利用TableRow对象的方法来实现本效果。

　　演示：

<html> <head> <title>TableRow对象的方法</title> <script language="JavaScript"> var intRowIndex = 0; var intCellIndex = 0; function insertCell(cellIndex){ var objCel = myTable.rows[intRowIndex].insertCell(cellIndex); objCel.innerText = intRowIndex + " : " + cellIndex; objCel.style.background = "pink"; } function deleteCell(){ myTable.rows[intRowIndex].deleteCell(intCellIndex); } function getIndex(){ intRowIndex = event.srcElement.parentElement.rowIndex; intCellIndex = event.srcElement.cellIndex; pos.innerText=intRowIndex + " : " + intCellIndex; } </script> </head> <body onload="pos.innerText=intRowIndex + ' : ' + intCellIndex;"> <h2>TableRow对象的方法</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" class="liehuo.net"> <input type="button" onclick="insertCell(intCellIndex)" value="插入单元格"> <input type="button" onclick="deleteCell()" value="删除单元格"> <input type="button" onclick="insertCell(myTable.rows[intRowIndex].cells.length)" value="添加单元格"> </form> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：保山站长网）

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

接续CKEditor怎样上传	如何使你的站跟新浪的
解析PHP上传自动生成缩	浅析php生成静态页面的