HTML Dom操作数据表
2016-03-06 17:21
441 查看
在QTP中有时候使用HTML Dom会带来事半功倍的效果,比如访问页面元素对象,对元素对象进行定位和获取属性值等,最近开始学HTML Dom的一些方法,属性,事件,修改等。
下面是通过HTML Dom操作页面表格,具体实现是:
1. 输入想要删除的行和列
2. 点击获得行列按钮,弹出提示框显示要删除的行列
3. 点击删除按钮,表格中相应的单元格中的数据被清空
-----------------------分割线----------------------------------------------------------------------------
运行前的表格截图:
运行后的表格截图:
源码包含两个函数sub()和deleteCell(),sub()用来显示要删除的行列,deleteCell()用来删除行列。
下面是通过HTML Dom操作页面表格,具体实现是:
1. 输入想要删除的行和列
2. 点击获得行列按钮,弹出提示框显示要删除的行列
3. 点击删除按钮,表格中相应的单元格中的数据被清空
-----------------------分割线----------------------------------------------------------------------------
运行前的表格截图:
运行后的表格截图:
源码包含两个函数sub()和deleteCell(),sub()用来显示要删除的行列,deleteCell()用来删除行列。
<!DOCTYPE html> <html> <head> <script> function sub(){ var content1 = document.getElementById("row"); var content2 = document.getElementById("col"); row = content1.value - 1; col = content2.value - 1; alert("RowNo is:"+row+",and ColNO is:"+col); } function deleteCell() { var i=document.getElementById("row").value-1; var j=document.getElementById("col").value-1; el=document.getElementById('myTable'); var row=el.rows(i); var cell=row.cells(j) cell.innerText="" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell a</td> <td>cell b</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> <td>cell a</td> <td>cell b</td> </tr> <tr> <td>cell 5</td> <td>cell 6</td> <td>cell a</td> <td>cell b</td> </tr> <tr> <td>cell 7</td> <td>cell 8</td> <td>cell a</td> <td>cell b</td> </tr> <tr> <td>cell 9</td> <td>cell 10</td> <td>cell a</td> <td>cell b</td> </tr> </table> <br> <input type="button" onclick="sub()" value="GetRowValue"> <form> Row <input type="text" Id="row"><br> Col <input type="text" Id="col"> </form> <input type="button" onclick="deleteCell()" value="DeleteRow"> </body> </html>
相关文章推荐
- HTML系列(七):多媒体
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
- 1、今天,如何在html中加入音乐?
- HTML全局属性
- HTML参考手册
- 详解HTML/XHTML中img图像标签的基本用法
- 简单掌握HTML中水平线标注与代码注释的用法
- 详解XHTML中的标题标签与段落标签的使用
- XHTML中的常用标签整理
- mvc 提交Html内容的处理
- 用onkeyup来实现html输入框的协同变化
- 在html中实时监测输入框的变化------onChange是做不到的
- html布局练习
- html布局练习
- 在html输入框中响应enter键盘------介绍重要的onkeydown方法实现“模糊查找”
- html的onChange是会误导人的------输入框变化且焦点离开才会触发
- html的textarea用作“使用说明框”真的非常适合
- HTML 表格
- HTML
- HTML 图像显示