`
入云涛
  • 浏览: 153780 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js 创建表格

阅读更多
添加table
<table class="tables" id="tableNorm" width="98%" border="0" cellpadding="0" cellspacing="0">
  <tbody id="tabfile">
							
  </tbody>
</table>

//表格得线条太粗,该为细线条
.tds{
 border-bottom-color: #cccccc;
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-left-color: #cccccc;
 border-left-width:1px;
 border-left-style:solid;
 }
 .tables{
 border-top-color: #cccccc;
 border-top-width:1px;
 border-top-style:solid;
 border-right-color: #cccccc;
 border-right-width:1px;
 border-right-style:solid;
 }

下列是js
创建js 类
var all = new Array();
function norm(id ,name){
   this.id = id;
   this. name = name;
}

//初始化数据
function init(){
 var m = new norm();
 m.id = 1;
 m.name = "A1";
 all.push(m);

 var m1= new normClass();
 m1.id = 2;
 m2.name = "A2";
 all.push(m1);

 var m2= new normClass();
 m2.id = 3;
 m2.name = "A3";
 all.push(m2);
}
function setColor(obj,color){
     setStyle(obj,"background-color:"+color);
 }
function setStyle(element,text) {   
     element.setAttribute("style",text)   
     element.style.cssText=text   
}
function createTrTd(){
  var f = 0;
  var table  = document.getElementById("tabfile");
  for(var   i=table.children.length;   i>0;   i--)   
  {   
      table.children[i-1].removeNode(true);   
  }

  for(var i=0; i<all.length;i++){
    if(i==0){
       //定义表头
        var tr = document.createElement('tr');  
       table.appendChild(tr);
       setStyle(tr,"background-color: #308dbb");

       var td1 = document.createElement('td');   
       tr.appendChild(td1);   
       td1.className="tds";
       td1.align="center";
       td1.height="23px;";
       td1.width="70px";
       var tm1 = "<font color='#ffffff' ><b>	指标编号</b> </font>";   
       td1.innerHTML =tm1;

       var td2 = document.createElement('td');   
       tr.appendChild(td2);   
       td2.className="tds";
       td2.align="center";
       td2.width="180px";
       var tm2 = "<font color='#ffffff' ><b>	指标名称</b> </font>";   
       td2.innerHTML =tm2;
    }
    var norm = all[i];
    if(f==0){
          var tr = document.createElement('tr');   
          tr.id = "tr"+norm.id;   
          table.appendChild(tr);
          setStyle(tr,"background-color: #ffffff");
          tr.onmousemove = function (){setColor(this,'#fdecae');};
          tr.onmouseout = function (){setColor(this,'#ffffff');};

          var td1 = document.createElement('td');   
	 tr.appendChild(td1);   
	 td1.className="tds";
	 td1.align="center";
	 td1.height="23px;";
	 td1.width="70px";
	 td1.appendChild(document.createTextNode(norm.id));

	 var td2 = document.createElement('td');   
	 tr.appendChild(td2);   
	 td2.className="tds";
	 td2.align="center";
	 td2.width="180px";
	 td2.appendChild(document.createTextNode(norm.name));
          f = 1;
    }else{
          var tr = document.createElement('tr');   
          tr.id = "tr"+norm.id;   
          table.appendChild(tr);
          setStyle(tr,"background-color: #ffffff");
          tr.onmousemove = function (){setColor(this,'#fdecae');};
          tr.onmouseout = function (){setColor(this,'#ffffff');};

          var td1 = document.createElement('td');   
	 tr.appendChild(td1);   
	 td1.className="tds";
	 td1.align="center";
	 td1.height="23px;";
	 td1.width="70px";
	 td1.appendChild(document.createTextNode(norm.id));

	 var td2 = document.createElement('td');   
	 tr.appendChild(td2);   
	 td2.className="tds";
	 td2.align="center";
	 td2.width="180px";
	 td2.appendChild(document.createTextNode(norm.name));
          f = 0;
    }

  }

}

function deleteNorm(normId){
 //删除这项
	 var all = new Array();
	 for(var i=0; i<normList.length;i++){
		 var norm = normList[i];
		 if(norm.id == normId){
		 else{
			 all.push(normList[i]);
		 }
	 }
	 normList = all;
	 viewNormList();
 }
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics