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


核心代码就在这 页面美化大家可以自己进行，因为我这是公司项目中的实战代码，可能会有些冗余，望大家海涵