zoukankan      html  css  js  c++  java
  • HTML Dom操作数据表

    在QTP中有时候使用HTML Dom会带来事半功倍的效果,比如访问页面元素对象,对元素对象进行定位和获取属性值等,最近开始学HTML Dom的一些方法,属性,事件,修改等。

    下面是通过HTML Dom操作页面表格,具体实现是:

    1. 输入想要删除的行和列

    2. 点击获得行列按钮,弹出提示框显示要删除的行列

    3. 点击删除按钮,表格中相应的单元格中的数据被清空

    -----------------------分割线----------------------------------------------------------------------------

    运行前的表格截图:

    运行后的表格截图:

    源码包含两个函数sub()和deleteCell(),sub()用来显示要删除的行列,deleteCell()用来删除行列。

    1 <!DOCTYPE html> <html> <head> <script>
    2 
    3 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>
    4 
    5 <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>
    6 
    7 <input type="button" onclick="deleteCell()" value="DeleteRow">   </body> </html>
  • 相关阅读:
    常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)
    禁用页面及页面所有frame内的右键菜单
    JS模态窗口返回值兼容问题解决方案
    winform登录时,在密码框按下回车,直接登陆
    C#中实现邮件发送功能
    CTFHub-彩蛋(持续更新~)
    CTFHub技能树-目录遍历
    免密钥方式登陆配置
    Ansible_Day1
    Python_Day2_共享你的代码
  • 原文地址:https://www.cnblogs.com/clarke157/p/5247976.html
Copyright © 2011-2022 走看看