js动态生成表格

   本文功能是利用ajax技术从后台获取数据，前端转化为json数据，根据数据动态生成表格。

<script type="text/javascript">
$(document).ready(function(){
//获取用户id和用户姓名
var userId=document.getElementById("userId").value;
var userName=document.getElementById("userName").value;

var mylianqin = document.getElementById("mylianqin");

    //已处理样式
    var handled="<div style='border:1px solid #ffab17;color:#ffab17;font-size:0.8em;display:inline-block;'>已处理</div>";
    //未处理样式
    var not_handled="<div style='border:1px solid #e0e0e0;color:#e0e0e0;font-size:0.8em;display:inline-block;'>未处理</div>";
   
$.ajax({
type:"get",
dataType:"text",
url:"../MyLianqinAction?userId="+encodeURIComponent(userId)+"&userName="+encodeURIComponent(userName),

async: false, //修改Ajax请求为同步
  success:function(data){ 
  // 由JSON字符串转换为JSON对象
     var caseJSON=eval("("+data+")");
  var len=caseJSON.caseInfo.length;
 
  //动态添加行
       for(var i=0;i<len;i++){
        var row = document.createElement("tr");
    var col = document.createElement("td");
    col.className="lianqin-td1";
    col.innerHTML=caseJSON.caseInfo[i].casedesc+"<input type='hidden' id='caseid_"+caseJSON.caseInfo[i].id+"' value='"+caseJSON.caseInfo[i].caseid+"'>";
    //列添加到行
    row.appendChild(col);
    //添加箭头
    var col2 = document.createElement("td");   
    col2.setAttribute("id",caseJSON.caseInfo[i].id);
    col2.οnclick=function(){showDetail(this.id);};   
    col2.rowSpan="2";
    col2.className="lianqin-img";   
       col2.innerHTML="<img alt='' src='../img/detail.png' width='12' style='cursor:pointer;'>";
      //列添加到行
       row.appendChild(col2);
       //行添加到table
    mylianqin.appendChild(row);
    //添加第二行
    var row2 = document.createElement("tr");
    var col3 = document.createElement("td");
    col3.className="lianqin-td2";
    //col3.innerHTML = caseJSON.caseInfo[i].reportdate+"&nbsp;&nbsp;&nbsp;&nbsp;"+not_handled;
    if(caseJSON.caseInfo[i].casestatus=="已结案"){
    col3.innerHTML = caseJSON.caseInfo[i].reportdate+"&nbsp;&nbsp;&nbsp;&nbsp;"+handled;
    }
    else{
    col3.innerHTML = caseJSON.caseInfo[i].reportdate+"&nbsp;&nbsp;&nbsp;&nbsp;"+not_handled;
    }
    //列添加到行
    row2.appendChild(col3);
    //行添加到table
    mylianqin.appendChild(row2);
       }  
 
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) { 
           alert(errorThrown); 
       } 
});
});
</script>

效果如下：