首先看一下效果图：
未操作之前页面：
进行操作之后的页面：
前台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="width:100%;">
<tr>
<td style="width:50%;">
<label style="font-size:20px;width:100%;" >SQL定义：</label>
</td>
<td style="width: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;width:20%;" align="right" >删除操作结果：</label>
<input type="text" style="width:25%;" id="deleteResult" />
<input type="button" style="width:25%;" value="校验删除操作" onclick="checkDeleteResult();"/>
<input type="button" style="width:25%;" value="取值" style="width: 120px;" onclick="getAllDatas();" />
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="sql" name="sql" style="width:100%;" rows = "5"></textarea>
</td>
</tr>
</table>
</form>
</p>
<p>
<label style="font-size:20px;" >数据：</label>
<label style="font-size:20px;width: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="width:100%;" id="columnDetail"></textarea>
</p>
<p>
<label style="font-size:20px;" >查看整行数据：</label> <br/>
<textarea name="sql" rows = "5" style="width:100%;" id="rowDataDetail"></textarea>
</p>
</body>
</html>