首先看一下效果图：
未操作之前页面：
进行操作之后的页面：
前台jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); request.setCharacterEncoding("UTF-8"); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script src="<%=path %>/mis2/gezComponents/jquery/jquery.js" type="text/javascript"></script> <script src="<%=path %>/mis2/gezComponents/jquery/jqueryui/jqueryuijs/jqueryui.js" type="text/javascript"></script> <script src="<%=path %>/mis2/gezComponents/jsUtils/AjaxUtil.js" type="text/javascript"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> #table th{ font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } </style> <script> /** * 依据用户点击单元格。动态设置字段具体数据文本框的值 */ function getColumnDetail(columnData){ columnData.style.color = "blue"; //数据被点过之后颜色设置为蓝色 var columnDetail=document.getElementById("columnDetail"); // 找到字段具体数据对象 columnDetail.innerHTML=columnData.innerHTML; // 改变内容 } /** * 设置鼠标事件响应效果 */ function setOnMounseOverColor(columnData){ columnData.style.background = "red"; //鼠标经过时表格背景设置为红色 } function setOnMounseOutColor(columnData){ columnData.style.background = ""; } /** * 获取具体数据，即每条数据的完整json字符串。并显示到整行数据一栏 */ function getRowDataDetail(tr){ var jsonData = tr.getAttribute("jsonData"); //获取该条数据的json字符串 var rowDataDetail = document.getElementById("rowDataDetail"); // 找到整行数据对象 rowDataDetail.innerHTML=jsonData; // 改变内容 } /** * 校验删除操作结果 */ function checkDeleteResult(){ var sql = document.getElementById("sql").value; var ajax = new AjaxUtil(); var path = "<%=path %>/QTPCommonServlet?
action=checkDeleteResult"; var paramData = "sql=" + sql; var settings = { "datatype":"text" }; ajax.sendAjax(path,paramData,successBackFunction,errorBackFunction,settings); function successBackFunction(result){ var deleteResult = document.getElementById("deleteResult"); if(result=='true'){ deleteResult.value = "成功"; }else{ deleteResult.value = "失败"; } } function errorBackFunction(){ alert("校验删除操作未运行"); } } /** * 获取表数据 */ function getAllDatas(){ var sql = document.getElementById("sql").value; var sqlDateNumber = "0"; //sqlDateNumber为保留变量，如须要对查询数据条数进行限制。能够放开使用（须要后台支持） var ajax = new AjaxUtil(); var path = "<%=path %>/QTPCommonServlet?action=getAllData"; var paramData = "sql=" + sql +"&sqlDateNumber=" + sqlDateNumber; var settings = { "datatype":"text" }; ajax.sendAjax(path,paramData,successBackFunction,errorBackFunction,settings); function successBackFunction(result){ createTable(result); } function errorBackFunction(){ alert("获取表数据操作未运行"); } } /** * 动态生成表格 */ function createTable(result){ var columnNames; //表字段名称字符串 var columnDatas; //表数据字符串 var columnNamesDetail = new Array(); //表字段名称数组 var columnData = new Array(); //表数据数组 var columnDataDetail = new Array(); //单条表数据信息数组 var columnJsonData; //单条数据的json字符串 var _table = document.getElementById("table"); var _row; var _cell; var rowNumber = 0; //记录数据条数，用于以下推断是否出竖向滚动栏 if(result.indexOf("||")!=-1) { columnNames = result.split("||")[0]; columnNamesDetail = columnNames.split(";"); columnDatas = result.split("||")[1]; columnData = columnDatas.split(";"); } /**先推断表格中是否已有内容，如有则运行清空操作*/ if(0!=_table.childNodes.length){ for(var i = _table.childNodes.length-1;i>=0;i--){ _table.removeChild(_table.childNodes[i]); //删除掉每一个子节点的内容 } var div = document.getElementById("mydiv"); div.style.height="0px"; //将div高度初始化为最小 } /**生成数据条数*/ var totalNumber=document.getElementById("totalNumber"); // 找到数据条数统计对象 if(columnData==0){ totalNumber.innerHTML="共"+0+"条"; alert('抱歉，没有查询到相关数据!'); }else{ totalNumber.innerHTML="共"+columnData.length+"条"; // 改变内容 } /**生成表头部分*/ _row = document.createElement("tr"); document.getElementById("table").appendChild(_row); for(var j = 0; j < columnNamesDetail.length; j++) { _cell = document.createElement("th"); _cell.innerText = columnNamesDetail[j]; _row.appendChild(_cell); } /**生成表主体部分*/ for (var i = 0; i < columnData.length; i++) { columnJsonData = columnData[i].split("@_@")[1]; columnDataDetail = columnData[i].split("@_@")[0].split("#"); _row = document.createElement("tr"); _row.setAttribute("jsonData", columnJsonData); //给每一个tr对象设置jsonData属性，用于被点击时得到json字符串 rowNumber++; _row.onclick= function(){getRowDataDetail(this)}; document.getElementById("table").appendChild(_row); for(var j = 0; j < columnDataDetail.length; j++) { _cell = document.createElement("td"); _cell.onclick= function(){getColumnDetail(this)}; _cell.onmouseover = function(){setOnMounseOverColor(this)}; _cell.onmouseout = function(){setOnMounseOutColor(this)}; if(columnDataDetail[j]=='' || columnDataDetail[j]==undefined || columnDataDetail[j]==null){ _cell.innerText = "null"; }else{ _cell.innerText = columnDataDetail[j]; } _row.appendChild(_cell); } } /**设置表格滚动栏*/ var div = document.getElementById("mydiv"); if(rowNumber>15){ //当数据超过15条时，限制div高度。出滚动栏 div.style.height="400px"; } div.style.width="100%"; div.style.overflow="scroll"; } </script> </head> <body> <body> <h1 align="center">QTP数据检查</h1> <p> <label style="font-size:20px;">測试说明：</label><br/><hr align="left"> <label style="font-size:17px;">本页面作为QTP測试辅助页面。能够完毕数据表增、删、改、查操作后的数据校验</label><br/> <label style="font-size:17px;">增、改、查校验流程：</label><br/> <label style="font-size:15px;">(1)在SQL定义一栏里输入相应SQL语句，如："select * from t_hyperlink",点击取值，则在数据一栏生成相应查询数据表格</label><br/> <label style="font-size:15px;">(2)点击表格中的随意一个单元格，则在字段具体数据一栏里显示字段信息，同一时候在具体数据一栏里显示整条数据相应的json字符串</label><br/> <label style="font-size:17px;">删除校验流程：</label><br/> <label style="font-size:15px;">在SQL定义一栏里输入查找被删除数据的SQL。如："select * from t_hyperlink where short_link='/link100'",点击校验删除操作，</label><br/> <label style="font-size:15px;">依据删除操作结果显示的信息进行推断删除操作是否成功运行。</label><br/><hr align="left"> </p> <p> <form action="http://localhost:8080/QTP/QTPCommonServlet" method="post"> <table style="100%;"> <tr> <td style="50%;"> <label style="font-size:20px;100%;" >SQL定义：</label> </td> <td style="50%;"> <!-- 请选择数据操作数目： <select name="sqlDateNumber"> <option id="" name="sqlDataNumber" value="">自己定义</option> <option id="" name="sqlDataNumber" value="10">显示前10条</option> <option id="" name="sqlDataNumber" value="all">显示所有</option> </select> --> <label style="font-size:16px;20%;" align="right" >删除操作结果：</label> <input type="text" style="25%;" id="deleteResult" /> <input type="button" style="25%;" value="校验删除操作" onclick="checkDeleteResult();"/> <input type="button" style="25%;" value="取值" style=" 120px;" onclick="getAllDatas();" /> </td> </tr> <tr> <td colspan="2"> <textarea id="sql" name="sql" style="100%;" rows = "5"></textarea> </td> </tr> </table> </form> </p> <p> <label style="font-size:20px;" >数据：</label> <label style="font-size:20px;300px;" id="totalNumber">共0条</label> <br/> <div id="mydiv"> <table border="1"> <tbody id="table"> </tbody> </table> </div> </p> <p> <label style="font-size:20px;" >查看字段具体数据：</label> <br/> <textarea name="sql" rows = "5" style="100%;" id="columnDetail"></textarea> </p> <p> <label style="font-size:20px;" >查看整行数据：</label> <br/> <textarea name="sql" rows = "5" style="100%;" id="rowDataDetail"></textarea> </p> </body> </html>