html如何制作动态表格,增加或者删除

功能如图所示


核心代码如下

html部分

      
(点增加后在空白框内输入!)

药品名称 服药剂量 开始时间 结束时间

js部分

  var tableNode,idvar1=0,idvar2=0,idvar=0; 
  function createTable(){ 
	var tab=document.getElementById("table");//获得table对象 
	if(tab==null){
		   	  tableNode=document.createElement("table");//获得对象 
		       tableNode.setAttribute("id","table") 

	}

    var myTable = document.getElementById("table");
	var tableValue="";
	if(myTable!=null){
		
	      for (var i=0;i7){
			  Tools.showAlert('', '已达到行数上限!', 2000);
				return;
			}
	      
	}
    var row=1;//获得行号 
	   var cols=4; 
	   //上面确定了 现在开始创建 
	   for(var x=0;x'; 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML=''; 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML=''; 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML=''; 
	   } 

	   document.getElementById("div1").appendChild(tableNode);//添加到那个位置 	   
  }  


  function delRow(){ 
	   //要删除行,必须得到table对象才能删除,所以在创建的时候必须要设置table对象的 id 方便操作 
	   var tab=document.getElementById("table");//获得table对象 
	   if(tab==null){ 
			  Tools.showAlert('', '删除的表不存在!', 2000);
	    return; 
	   } 
	//   var rows=1//获得要删除的对象 
	   
	   var rows=tab.rows.length;
/* 	   if(isNaN(rows)){ 
		   Tools.toast('删除的表不存在!');
	    alert("输入的行不正确。请输入要删除的行。。。"); 
	    return; 
	   }  */
	   if (rows >= 1 && rows <= tab.rows.length) { 
	    tab.deleteRow(rows-1); 
	    }else{ 
			  Tools.showAlert('', '删除的行不存在!', 2000);
	     return ; 
	    }   
	  } 
  

核心代码就在这 页面美化大家可以自己进行




你可能感兴趣的:(html如何制作动态表格,增加或者删除)