js动态添加表格设置样式 insertRow() 设置样式

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";
   }
    
  }

最后

以上就是动人鞋子为你收集整理的js动态添加表格设置样式 insertRow() 设置样式的全部内容，希望文章能够帮你解决js动态添加表格设置样式 insertRow() 设置样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。