js 动态插入表格设置样式 js设置样式

js 动态插入表格设置样式 js设置样式

发表于 2010 年 08 月 23 日 由 搜集者

Js代码

• var mytable = document.getElementById(“propertyTable”);   
• var row = mytable.insertRow();   

• 方法一：设置css class方式，如下，“table01-td01″为一css class样式

  Js代码
• var mytd= row.insertCell();   
• mytd.className=”table01-td01″;  

• 方法二：直接设置style属性，如下

  Js代码
•  row .style.backgroundColor=”#FFFFFF”  ；//设置行的背景色   
•   
•   
• td=row .insertCell();         //添加单元格   
• td.style.cssText=”BORDER-BOTTOM:   #4a75ce   1px   solid”;     
• //设置单元格的样式   
•   
• td.innerHTML=”<input name=button type=button   />”;     
•  //添加td中的内容

<script type="text/javascript">
  
  function findPosX(obj) {
  var curleft = 0;
  
  if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body
     while (obj.offsetParent) {//遍历所有父类元素
      curleft += obj.offsetLeft;//当前元素的左边距
      obj = obj.offsetParent;       
     }
  } else if (obj.x) curleft += obj.x;
  return curleft;
  }
  
  function findPosY(obj) {
  var curtop = 0;  
  if (obj.offsetParent) {
     while (obj.offsetParent) {
  
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
     }
  } else if (obj.y) curtop += obj.y;
  return curtop;
  }
  function showdiv(vart,obj,weekdiv,theme,endtime,status,endtime)
  {
   //alert(vart)
   //var test = $(obj).parent().parent();
   //alert(findPosY(obj.parentElement.parentElement))
   //alert(test.outerHTML)
   //alert($(obj).parent().parent().attr("offsetHeight"))
   
   var   ccell=document.getElementById("showtable").getElementsByTagName('tr')[1].getElementsByTagName('td')[0];
   
   //var   ccellz=document.getElementById("showtable").getElementsByTagName('tr')[1].getElementsByTagName('td')[5];
   //alert(findPosX(ccellz)+45-);
   //alert();
   //status=status.replace("'","@").replace("/","#").replace(">","*").replace("<","&").replace(" ","");
   //status=status.replace("'","w").replace("/","u").replace(">","v").replace("<","x").replace(" ","");
   
   status = status.replace(/w/g, "'").replace(/u/g, "/").replace(/v/g, ">").replace(/x/g, "<").replace(/k/g, " ");
   endtime=endtime.replace(/w/g, "-");
   //endtime=endtime.replace("-","w");
    //var tempstatus="";
    
    //endtime=endtime.replace("@","-");
    //alert(status+"--"+endtime);        
   //var   ccell   =   document.all.tags( "table")[1].rows[1];  
   //alert(document.all.tags( "table")[1].tagName);
   //return
   //alert(ccell.innerHTML);
   
    var te="weekdiv_"+weekdiv;   
      var tempobj= document.getElementById(te);
   if(tempobj.style.display=="block")
   { 
    // tempobj.style.left=findPosX(ccell);
      //tempobj.style.top=findPosY(obj.parentElement.parentElement)+$(obj).parent().parent().attr("offsetHeight");
       //tempobj.style.className="PositionObj";
       var   ccellz=document.getElementById(""+(vart)+"_s");
       //var   ccellz=document.getElementById("showtable").getElementsByTagName('tr')[obj.parentElement.parentElement.parentElement.rowIndex].getElementsByTagName('td')[0];
       ccellz.rowSpan=ccellz.rowSpan-1;
       var table = document.getElementById("showtable");
  
     table.deleteRow(obj.parentElement.parentElement.parentElement.rowIndex+1);

       obj.src="images/jtbottom.jpg";
       obj.title="查看上次记录";
       tempobj.style.display="none";
      
      
      
   }else
   {
    // tempobj.style.left=findPosX(ccell);
       //tempobj.style.top=findPosY(obj.parentElement.parentElement)+$(obj).parent().parent().attr("offsetHeight");
      // tempobj.style.className="TableBg3";
      
       var table = document.getElementById("showtable");
       //td.parentElement.rowIndex //
       //alert(obj.parentElement.parentElement.parentElement.rowIndex);
      // alert("行"+vart+"出"+counttemp);
      
      //alert(obj.parentElement.parentElement.parentElement.innerHTML);
      //得到一行的第一个单元格
      //var   ccellz=document.getElementById("showtable").getElementsByTagName('tr')[obj.parentElement.parentElement.parentElement.rowIndex].getElementsByTagName('td')[0];
      //alert(obj.parentElement.parentElement.parentElement.rowIndex);
      //alert(ccellz.rowSpan+"--"+ccellz.innerHTML);
      //设置单元格跨行加1
      //得到一行的第一个单元格
       var   ccellz=document.getElementById(""+(vart)+"_s");
       ccellz.rowSpan=ccellz.rowSpan+1;
     var newRow = table.insertRow(obj.parentElement.parentElement.parentElement.rowIndex+1);//在指定位置插入行
     //newRow.style.backgroundColor="blue";
    
    // var tempi= newRow.rowIndex;
    // alert(tempi);
    for(var i=0;i<5;i++)
    {
     var cellstr=newRow.insertCell(i);
     if(i==0)
     {
      cellstr.innerHTML = theme;
      cellstr.style.cssText="text-align:center;background:url(/newworktask/request/images/TableBg2.gif) repeat-y";  
       
      
     }else  if(i==1)
     {
      cellstr.innerHTML = endtime;
      cellstr.style.cssText="text-align:center;background:url(/newworktask/request/images/TableBg2.gif) repeat-y";    
     }else  if(i==2)
     {
      cellstr.innerHTML = status;
      cellstr.style.cssText="text-align:center;background:url(/newworktask/request/images/TableBg2.gif) repeat-y";    
     }else if(i==3)
     {
      cellstr.innerHTML = endtime;
      cellstr.style.cssText="text-align:center;background:url(/newworktask/request/images/TableBg2.gif) repeat-y";    
     }else
     {
      cellstr.innerHTML="";
      cellstr.style.cssText="text-align:center;background:url(/newworktask/request/images/TableBg2.gif) repeat-y";   
     }
    }
    
      
       obj.src="images/jtTop.jpg";
       obj.title="关闭上次记录";
       tempobj.style.display="block";
   }
    
  }