JS表格绘制技巧-优快云博客

1.绘制表格
<script   language=javascript>
function   show(){
var   a=new   Array('1','2','3');
var   b=new   Array('a','b','c') ;
var   objTable=document.createElement("table")
var   objTBody=document.createElement("tbody")
for(var   i=0;i <a.length;i++)
{
var   objTr=document.createElement("tr")

var   objTd=document.createElement("td")
objTd.innerHTML=a[i]
objTr.appendChild(objTd);
var   objTd=document.createElement("td")
objTd.innerHTML=b[i]
objTr.appendChild(objTd);
objTBody.appendChild(objTr)
}
objTable.appendChild(objTBody)
objTable.id="table6";
objTable.border="1";
objTable.style.width="555";
objTable.setAttribute("cellSpacing","1")
document.body.appendChild(objTable)
}
</script>
<body   onload="show();">
</body>

2.绘制表格的js
function $$(tag)
{
return document.createElement(tag);
}

//绘制表格
function   show(data){

var tb = document.all["spyj"].tBodies[0];
for (var i = 0;i < data.length; i++) {

        var tr1 = createTR("审批人",data[i].auditUserName,"审批人所在部门",data[i].auditOrganName);
   var tr2 = createTR("审批日期",data[i].auditTime,"审批结果",data[i].result);
  var tr3 = createContentTR("审批意见",data[i].ideaContext,"");
  var tr4 = createContentTR("","","all");
  tb.appendChild(tr1);
  tb.appendChild(tr2);
  tb.appendChild(tr3);
  tb.appendChild(tr4);
}

}

    function createTR(k1,v1,k2,v2)
    {
        var tr = $$("tr");
  var td1 = $$("td");
  td1.innerText=k1;

  var td2 = $$("td");
  td2.innerHTML =v1;
  td2.className ="four-content";

var td3 = $$("td");
td3.innerHTML =k2;

  var td4 = $$("td");
  td4.innerHTML =v2;
  td4.className ="four-content";

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.appendChild(td4);
  return tr;
    }

    function createContentTR(k1,v1,action)
    {
        if(action=="all")
        {
          var tr = $$("tr");
    var td1 = $$("td");
    td1.colSpan="4";
    td1.style.height="10px";
    tr.appendChild(td1);
     return tr;
        }else
        {
         var tr = $$("tr");
  var td1 = $$("td");
  td1.innerText=k1;

  var td2 = $$("td");
  td2.innerHTML =v1;
  td2.className ="four-content";
  td2.colSpan="3";
  td2.style.height="100px";
  tr.appendChild(td1);
  tr.appendChild(td2);
  return tr;
        }
    }

2.绘制表格的页面代码:
<table class="table-form" id="spyj">

</table>