点击按钮实现表格动态添加或删除一行

表格html

<form action="" id="mytable" > 

<table id="table2" class="table normalFont " style="float: content;text-align: content;margin-top: 0px">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名称</td><td>测量范围</td><td>不确定度</td><td>证书编号</td><td>有效期</td>
</tr>
<c:forEach items="${uwd}" var="item" varStatus="i">
<tr>
<td>
<c:choose>
                          <c:when test="${1==i.count}">
                            <img οnclick="addRowg(0)" src = "${ctx }/Images/danceradd.jpg" style="width: 18px;height:18px;cursor:pointer" />
                          </c:when>
                          <c:otherwise>
                             <img οnclick="delRow(this.parentNode.parentNode.rowIndex)" src = "${ctx }/Images/dancerdel.jpg" style="width: 18px;height:18px;cursor:pointer" />
                          </c:otherwise>
                       </c:choose>
<input type="text" name="username" style="width:100px;"  value="${item.username }"/></td>
<td><input type="text" name="measuringrange" style="width:100px;"  value="${item.measuringrange }"/></td>
<td><input type="text" name="uncertainty" style="width:100px;"  value="${item.uncertainty }"/></td>
<td><input type="text" name="certificate_number" style="width:100px;"  value="${item.certificate_number }"/></td>
<td><input type="text" name="vld" id="youxiaoqi" value="${item.vld}" style="width:100px"
οnclick="WdatePicker({ isShowClear: false, readOnly: true,dateFmt:'yyyy-MM-dd'})"/></td>
<td><input style="display: none" type="text" name="id" style="width:100px;"  value="${item.id }"/></td>
</tr>
       </c:forEach>

</table>

</form>

js代码

//动态添加一行

function addRowg(){

        var rows = document.getElementById('table2').rows.length ; //获取表格行数

//var newTr =document.getElementById('table2').insertRow(1)  //添加到第一行，默认最后一行

        var colsNum=table2.rows[rows -1].cells.length;//获取行的列数，我这里没有用到也没有试过，不行的话评论告诉我。
if(rows=="6"){   //业务需求最多添加至5行
return;
}
var newTr = table2.insertRow();//添加一行
var newTd0 = newTr.insertCell();//第一列

newTd0.setAttribute("align","center");//添加一个样式
newTd0.innerHTML = '<img οnclick="delRow(this.parentNode.parentNode.rowIndex)" src = "${ctx }/Images/dancerdel.jpg" style="width: 18px;height:18px;cursor:pointer" />&nbsp;<input type="text" name="username" style="width:100px;"  value=""/>';
var newTd1 = newTr.insertCell();//第二列
newTd1.innerHTML = '<input type="text" name="measuringrange" style="width:100px;"  value=""/>';
var newTd2 = newTr.insertCell();//第三列
newTd2.innerHTML = '<input type="text" name="uncertainty" style="width:100px;"  value=""/>';
var newTd3 = newTr.insertCell();//第四列
newTd3.innerHTML = '<input type="text" name="certificate_number" style="width:100px;"  value=""/>';
var newTd4 = newTr.insertCell();//第五列
newTd4.innerHTML = '<input type="text" name="vld" id="youxiaoqi" value="" style="width:100px" οnclick="WdatePicker({ isShowClear: false, readOnly: true})"/>';
var newTd5 = newTr.insertCell();//第六列
newTd5.innerHTML = '<input style="display: none" type="text" name="id" style="width:100px;"  value=""/>';
}

//动态删除1行
function delRow(rowIndex){
   var tbobj=document.getElementById('table2');
   if(rowIndex==-1){
       if(tbobj.rows.length>1){
           tbobj.deleteRow(tbobj.rows.length-1);
       }
   }else{
        tbobj.deleteRow(rowIndex);
   }
}

//最后附上展示图，这是点击添加按钮后的效果，请忽略我巨丑的图标，嘎嘎嘎......