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

功能如图所示

核心代码如下

html部分

      <div class="extends" >
	    <div class="extends_item" style="height:400px;width:100%;  padding-left:1%" >
	    <div class="title"><span style="font-size:12px;color:red;">（点增加后在空白框内输入！）</span></div>
	    <div class="">
 			<input type="button"  style="border:1px solid #ccc;background:#fff" value="增加" onclick="createTable()"/>
			<input type="button"  style="border:1px solid #ccc;background:#fff" value="删除" onclick="delRow()"/><br/> 
      	</div>
        <div class="">
			<span class="stayleft" style="margin:0px 1%;  white-space: nowrap;"> 药品名称</span>
        	<span class="center" style="margin:0px 8%;  white-space: nowrap;"> 服药剂量</span>
        	<span class="stayright" style="margin:0px 0%;  white-space: nowrap;"> 开始时间</span>
        	<span class="stayright" style="margin:0px 8%;  white-space: nowrap;">结束时间</span>
      	</div>
	      <div style="height:300px;width:100%;" id="div1">
	      </div>
      	</div>
      </div>

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;i<myTable.rows.length;i++){
	          var value1 = myTable.rows[i].cells[0].getElementsByTagName("input")[0].value;
	          if(value1==null||value1==""||value1.trim().length == 0){
				  Tools.showAlert('', '请输入服药名称！', 2000);
	    	      return;  
		       }
	          var value2 = myTable.rows[i].cells[1].getElementsByTagName("input")[0].value;
	          if(value2==null||value2==""||value2.trim().length == 0){
				  Tools.showAlert('', '请输入药品剂量！', 2000);
		    	    return;  
			  }
	          var value3 = myTable.rows[i].cells[2].getElementsByTagName("input")[0].value;
	          if(value3==null||value3==""||value3.trim().length == 0){
				  Tools.showAlert('', '请输入服药开始时间！', 2000);
		    	    return;  
			  }
	          var value4 = myTable.rows[i].cells[3].getElementsByTagName("input")[0].value;
	          if(value4==null||value4==""||value4.trim().length == 0){
				  Tools.showAlert('', '请输入服药截止时间！', 2000);
		    	    return; 
			  }
	      }
	      
	      if(myTable.rows.length>7){
			  Tools.showAlert('', '已达到行数上限！', 2000);
				return;
			}
	      
	}
    var row=1;//获得行号 
	   var cols=4; 
	   //上面确定了 现在开始创建 
	   for(var x=0;x<row;x++){ 
	    var trNode=tableNode.insertRow(); 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML='<input style="width:85%;overflow:hidden;" type="text" name="casefys" id="medicineName'+idvar+'" value="" />'; 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML='<input style="width:85%;overflow:hidden;" type="text" name="casefys" id="dosage'+idvar+'" value="" />'; 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML='<input style="width:85%;overflow:hidden;" type="text" name="casefys" id="startDate'+idvar+'" value=""   onclick="showDatePicker(this)"/>'; 
	     var tdNode=trNode.insertCell(); 
	     idvar++;
	     tdNode.innerHTML='<input style="width:85%;overflow:hidden;" type="text" name="casefys" id="endDate'+idvar+'"  value=""  onclick="showDatePicker(this)"/>'; 
	   } 

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

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