本文操作环境:windows7系统、javascript1.8.5版,dell g3电脑
javascript中table怎么删除行?
javascript为table动态添加、删除行
我一共写了三种方法来实现添加行的功能,写了一种方法来实现删除行的功能,主要感觉是一定要熟悉javascript的api,其实这些东西api文档里面都有,就看你是否知道javascript中有这个函数或属性,然后把这些属性和函数整合起来就是你想要的东西。
所有html元素都能用的常用函数:node.appendchild(node)、
所有html元素都能用的常用属性:element.tagname
document对象的常用方法:document.createelement(name)
43c4707103c6cc3650c2aeb71d2b1e8d中的常用函数:tableobject.insertrow(index)、tableobject.deleterow(index)
43c4707103c6cc3650c2aeb71d2b1e8d中的常用属性:tableobject.rows、tableobject.rows.length
7000aaa9af6133c37354a0015cd35a33中的常用函数:tablerowobject.insertcell(index)
868c3f8d39a371013a78a87c30e1b0d8中的常用属性:tablerowobject.rowindex
<style type="text/css"> table{ border:1px solid #000; border-collapse: collapse; } th,td{ border:1px solid #000; padding:6px; }</style><script type="text/javascript"> function addrow1(){ var userinfo = document.getelementbyid("userinfo"); var row = document.createelement("tr"); var td1 = document.createelement("td"); td1.innerhtml = "李四"; var td2 = document.createelement("td"); td2.innerhtml = "102"; var td3 = document.createelement("td"); td3.innerhtml = "北海"; var td4 = document.createelement("td"); td4.innerhtml = "<a onclick='delete(this)'>删除</a>"; row.appendchild(td1); row.appendchild(td2); row.appendchild(td3); row.appendchild(td4); userinfo.appendchild(row); } function addrow2(){ var userinfo = document.getelementbyid("userinfo"); var rowlength = userinfo.rows.length; //新行将被插入index所在行之前。若index等于表中的行数,则新行将被附加到表的末尾。 //返回一个tablerow,表示新插入的行。 var tablerow = userinfo.insertrow(rowlength); tablerow.innerhtml = "<td>李四</td><td>102</td><td>四海</td><td><a onclick='deleterow(this)'>删除</a></td>"; } function addrow3(){ var userinfo = document.getelementbyid("userinfo"); //计算rows.length时会把表头包含在内 var rowlength = userinfo.rows.length; var tablerow = userinfo.insertrow(rowlength); //新单元格将被插入当前位于 index 指定位置的表元之前 //如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。 var tablecell0 = tablerow.insertcell(0); var tablecell1 = tablerow.insertcell(1); var tablecell2 = tablerow.insertcell(2); var tablecell3 = tablerow.insertcell(3); tablecell0.innerhtml = "李四"; tablecell1.innerhtml = "103"; tablecell2.innerhtml = "黑海"; tablecell3.innerhtml = "<a onclick='deleterow(this)'>删除</a>"; } //不能传初始化时当前元素所在行的rowindex,因为删除操作之后当前元素所在行的rowindex会发送变化 function deleterow(_this){ var userinfo = document.getelementbyid("userinfo"); var rowindex = gettrindex(_this); //deleterow() 方法用于从表格删除指定位置的行 //参数 index 指定了要删除的行在表中的位置 userinfo.deleterow(rowindex); } function gettrindex(element){ if(element.tagname.tolowercase() == "tr"){ //rowindex属性返回某一行在表格的行集合中的位置(row index) return element.rowindex; }else{ return gettrindex(element.parentnode); } }</script>
推荐学习:《javascript高级教程》
以上就是javascript中table怎么删除行的详细内容。