JQUERY动态生成DIV，table等数据

//点击问题单个数查看详情
//行索引(最近一个记录 显示状态和模块)
var rowIndex = 0;
// 严重级别
var diName = "";
// 迭代版本号
var iterVersion = "";
// 报表名
var reportName = "";
// 是否新增问题单
var isClose = "";
// 滚动条高度
var offset = 0;
// 每页记录数
var size = 10;
// 总页数
var totalPage = 0;
// 当前页
var currentPage = 0;
// 键 有多少key就有多少条数据
var Keys = "";
// projectId
var ProjectId = 0;

// 绑定高度并获得隐藏keys
$(document).ready(function() {
 $("a").bind("click", function(event) {
  var offsetHeight = $(event.target).offset();
  offset = offsetHeight.top + $(event.target).height();
  var p_keys = $(event.target).next("#hkeys").val();
  Keys = p_keys;
 });
});

/**
 * 显示状态和模块
 *
 * @return
 */
function dispStatusAndCom(data) {
 $("#tReportTable").append(
   $("<tr><td colspan='4'>问题单详情(" + reportName + " " + iterVersion
     + " " + isClose + " " + diName + ")</td></tr>"));
 $("#tReportTable").append(
   $("<tr><td style='width:12%;'>Key</td><td style='width:15%;'>状态</td><td style='width:10%;'>所属模块</td><td>概要</td></tr>"));
 for ( var i = 0; i < data.length; i++) {
  $("#tReportTable").append(
    $("<tr><td><a href='http://" + data[i].serverAddr + ":"
      + data[i].port + "/browse/" + data[i].key
      + "' target='_blank'>" + data[i].key + "</a></td>"
      + "<td style='text-align: left;'>" + data[i].status
      + "</td>" + "<td style='text-align: left;'>"
      + data[i].component + "</td>"
      + "<td style='text-align: left;'>" + data[i].summary
      + "</td></tr>"));
 }
}
/**
 * 隐藏状态和模块
 *
 * @return
 */
function hiddenStatusAndCom(data) {
 $("#tReportTable").append(
   $("<tr><td colspan='2'>问题单详情(" + reportName + " " + iterVersion
     + " " + isClose + " " + diName + ")</td></tr>"));
 $("#tReportTable").append(
   $("<tr><td style='width:12%;'>Key</td><td>概要</td></tr>"));
 for ( var i = 0; i < data.length; i++) {
  $("#tReportTable").append(
    $("<tr><td><a href='http://" + data[i].serverAddr + ":"
      + data[i].port + "/browse/" + data[i].key
      + "' target='_blank'>" + data[i].key + "</a></td>"      
      + "<td style='text-align: left;'>" + data[i].summary
      + "</td></tr>"));
 }
}
/**
 * 动态创建层并添加显示内容 改分页
 *
 * @param data
 * @return
 */
function tReportDivPage(data) {

 // 清除"Load..."
 $("#tableReportDiv").empty();
 // 添加表格、数据
 $("<table/>").appendTo($("#tableReportDiv")).attr("id", "tReportTable")
   .attr("width", "100%").attr("border", "0").attr("cellpadding", "0")
   .attr("cellspacing", "0");
 
 if(rowIndex==0){
  dispStatusAndCom(data);
 }else{
  hiddenStatusAndCom(data);
 }
 
 $("<br/>").appendTo($("#tableReportDiv"));

 if (currentPage != 0) {
  $("<a id='pageHome'>首页</a>").appendTo($("#tableReportDiv"));
  $("#pageHome").css( {
   "color" : "#0000ff",
   "text-decoration" : "underline",
   "cursor" : "pointer"
  }).bind("click", function() {
   pageSize(0, size);
  });
 } else {
  $("<a>首页</a>").appendTo($("#tableReportDiv")).css( {
   "color" : "#000000",
   "text-decoration" : "none"
  });
 }
 $("<a>&nbsp;&nbsp;</a>").appendTo($("#tableReportDiv")).css( {
  "color" : "#000000",
  "text-decoration" : "none"
 });

 if (currentPage - 1 >= 0) {
  $("<a id='pageBefore'>上一页</a>").appendTo($("#tableReportDiv"));
  $("#pageBefore").css( {
   "color" : "#0000ff",
   "text-decoration" : "underline",
   "cursor" : "pointer"
  }).bind("click", function() {
   pageSize((currentPage - 1), size);
  });
 } else {
  $("<a>上一页</a>").appendTo($("#tableReportDiv")).css( {
   "color" : "#000000",
   "text-decoration" : "none"
  });
 }
 $("<a>&nbsp;&nbsp;</a>").appendTo($("#tableReportDiv")).css( {
  "color" : "#000000",
  "text-decoration" : "none"
 });

 if (currentPage + 1 < totalPage) {
  $("<a id='pageNext'>下一页</a>").appendTo($("#tableReportDiv"));
  $("#pageNext").css( {
   "color" : "#0000ff",
   "text-decoration" : "underline",
   "cursor" : "pointer"
  }).bind("click", function() {
   pageSize((currentPage + 1), size);
  });
 } else {
  $("<a>下一页</a>").appendTo($("#tableReportDiv")).css( {
   "color" : "#000000",
   "text-decoration" : "none"
  });
 }
 $("<a>&nbsp;&nbsp;</a>").appendTo($("#tableReportDiv")).css( {
  "color" : "#000000",
  "text-decoration" : "none"
 });

 if (currentPage != (totalPage - 1)) {
  $("<a id='pageEnd'>末页</a>").appendTo($("#tableReportDiv"));
  $("#pageEnd").css( {
   "color" : "#0000ff",
   "text-decoration" : "underline",
   "cursor" : "pointer"
  }).bind("click", function() {
   // tReportDivPage(data, (totalPage - 1));
    pageSize((totalPage - 1), size);
   });
 } else {
  $("<a>末页</a>").appendTo($("#tableReportDiv")).css( {
   "color" : "#000000",
   "text-decoration" : "none"
  });
 }
 $("<a>&nbsp;&nbsp;</a>").appendTo($("#tableReportDiv")).css( {
  "color" : "#000000",
  "text-decoration" : "none"
 });

 $("<a>当前页: " + (currentPage + 1) + "&nbsp;&nbsp;总页数: " + totalPage + "</a>")
   .appendTo($("#tableReportDiv")).css( {
    "color" : "#000000",
    "text-decoration" : "none"
   });

 $("<br/>").appendTo($("#tableReportDiv"));
 $("<br/>").appendTo($("#tableReportDiv"));
 $("<input type='button' />").appendTo($("#tableReportDiv")).attr("id",
   "cencelbtn").attr("class", "btn2").attr("value", "关闭").click();
 $("#cencelbtn").bind("click", function() {
  $("#tableReportDiv").hide();
 });
}

/**
 * DWR 提交
 *
 * @param keys
 * @return
 */
function tableReportSubmit(projectId, reportname, version, isclose, name,
  rowindex) {
 if (!checkKeys(Keys)) {
  $("#msgDiv").innerHTML = "无Key值,返回!";
  return;
 }

 // 给全局变量赋值
 rowIndex = rowindex;
 diName = name;
 iterVersion = version;
 reportName = reportname;
 isClose = isclose;
 ProjectId = projectId;
 // 当前页须重新归零
 currentPage = 0;

 var key = Keys.substr(1).split(";");
 // 总记录数
 var totalIdx = key.length;
 // 算出总页数
 totalPage = (totalIdx % size == 0) ? (totalIdx / size) : (Math
   .floor(totalIdx / size) + 1);

 // 调用分页函数
 pageSize(currentPage, size);
}
/**
 * 分页函数
 *
 * @param curentPage
 * @param size
 * @return
 */
function pageSize(curentpage, size) {
 // 先清除
 $("div").remove("#tableReportDiv");
 // 创建Div
 $("<div/>").appendTo($(document.body)).attr("id", "tableReportDiv").attr(
   "class", "show_index").css( {
  "top" : offset + "px"
 }).text("Load...");

 // 全局当前页要变化
 currentPage = curentpage;
 jiraIssueService.getPageSize(ProjectId, Keys, currentPage, size, function(
   data) {
  tReportDivPage(data);
 });
}
/**
 * 验证keys keys=null 就不用查了
 *
 * @param keys
 * @return
 */
function checkKeys(keys) {
 if (null == keys || "" == keys || keys.lenght <= 0) {
  return false;
 }
 return true;
}