js中对表格的操作总结
2009-12-19 09:18
465 查看
两个函数说明: | |
inserRow()和insertCell()方法 | |
首先,表格行索引从0开始。 | |
inserRow():这个函数将新行添加到index的那一行前, | |
比如insertRow(0),是将新行添加到第一行之前。 | |
默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。 | |
objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。 | |
insertCell()和insertRow()的用法相同,这里就不再说了。 | |
deleteRow()和deleteCell()方法 | |
deleteRow(index):index从0开始 | |
删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除: | |
var row=document.getElementById("行的Id"); | |
var index=row.rowIndex; //有这个属性,嘿嘿 | |
objTable.deleteRow(index); | |
注意: | |
删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的 | |
错误JS代码: function clearRow() { objTable= document.getElementById("myTable"); var length = objTable.rows.length for( var i=1; i<length ; i++ ) { tblObj.deleteRow(i); //应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的 关键,rows.length总是在变小,删除的行数总是会比预想的要少一半 } } | |
正确JS代码: function clearRow() { objTable= document.getElementById("myTable"); for( var i=1; i<objTable.rows.length ; i++ ) { tblObj.deleteRow(1); } } | |
事例: | |
HTML代码: <table width=100% cellpadding=0 cellspacing=0 style="font-size:13px" id="usergrouptable"> <tr style="background-image: url(../image/titlelan.gif);color:white" height=30 > <td colspan=3> 用户组管理<span onclick="CloseDiv();" style="margin- left:200px;width:20px;cursor:hand"> </span></td> </tr> <tr> <td>用户组ID</td> <td>用户组名</td> <td>操作<input type="button" onclick="AddRow('usergrouptable');" value="+"></td> </tr> <tr id="row3"> <td><input type=text id='txti3' class='textStyle'> </td> <td><input type=button id='del3' value='删除' align='absmiddle' onclick="deleteTheRow('row3');"></td> <td>操作<input type="button" onclick="AddRow('usergrouptable');" value="+"></td> </tr> </table> | |
JS代码: var id= 4; //表格增加行 function AddRow(tablename) { var tab=document.getElementById(tablename); var row=tab.insertRow(-1); /*添加行id*/ row.id="row"+id; var cell1=row.insertCell(-1); var cell2=row.insertCell(-1); var cell3=row.insertCell(-1); cell1.innerHTML = "<input type='text' id='txti"+id+"' class='textStyle' value="+id+">"; cell2.innerHTML = "<input type=button id='del"+id+"' value='删除' align='absmiddle' onclick=/"deleteTheRow('row"+id+"');/">"; cell3.innerHTML = "<input type='button' onclick=/"AddRow('usergrouptable');/" value='+'>"; id++; } //删除行 function deleteTheRow(rowid) { if(confirm("确定删除此项吗?")) { var tab = document.getElementById("usergrouptable"); var row = document.getElementById(rowid); var inx = row.rowIndex;/*获得行号rowIndex*/ //var inx = document.getElementById("del3").parentElement.parentElement.rowIndex; tab.deleteRow(inx);/*删除此行*/ alert("删除成功!"); } } | |
相关文章推荐
- js操作table元素实现表格行列新增、删除技巧总结
- 【JS总结】——DOM操作表格和样式
- js操作table元素实现表格行列新增、删除技巧总结
- js中对表格的操作总结
- 使用JS操作页面表格,元素的一些技巧
- js基本知识点总结-----js dom基本操作
- JS 父子(弹出)窗口操作总结
- js操作表格
- JS操作JSON总结
- JavaScript中使用JSON,即JS操作JSON总结
- JS中数组操作总结
- JS操作表格
- javascript中字符串常用操作总结、JS字符串操作大全
- 使用Js实现网页表格操作
- js操作样式总结
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS操作JSON总结
- 利用js事件进行简单的表格操作
- JS操作html表格