点击按钮实现表格动态添加或删除一行
2017-07-14 10:35
465 查看
表格html
<form action="" id="mytable" >
<table id="table2" class="table normalFont " style="float: content;text-align: content;margin-top: 0px">
<tr>
<td> 名称</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 onclick="addRowg(0)" src = "${ctx }/Images/danceradd.jpg" style="width: 18px;height:18px;cursor:pointer" />
</c:when>
<c:otherwise>
<img onclick="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"
onclick="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 onclick="delRow(this.parentNode.parentNode.rowIndex)" src = "${ctx }/Images/dancerdel.jpg" style="width: 18px;height:18px;cursor:pointer" /> <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" onclick="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);
}
}
//最后附上展示图,这是点击添加按钮后的效果,请忽略我巨丑的图标,嘎嘎嘎......
<form action="" id="mytable" >
<table id="table2" class="table normalFont " style="float: content;text-align: content;margin-top: 0px">
<tr>
<td> 名称</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 onclick="addRowg(0)" src = "${ctx }/Images/danceradd.jpg" style="width: 18px;height:18px;cursor:pointer" />
</c:when>
<c:otherwise>
<img onclick="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"
onclick="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 onclick="delRow(this.parentNode.parentNode.rowIndex)" src = "${ctx }/Images/dancerdel.jpg" style="width: 18px;height:18px;cursor:pointer" /> <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" onclick="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);
}
}
//最后附上展示图,这是点击添加按钮后的效果,请忽略我巨丑的图标,嘎嘎嘎......
相关文章推荐
- JQ点击按钮动态克隆一行表格以及删除表格
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- JQuery实现动态表格点击按钮表格增加一行
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- asp.net后台代码实现点击按钮动态添加table的一行
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- JQuery实现动态表格点击按钮表格增加一行
- 动态生成 指定列数、行数的表格。并在每行最后一列添加一个删除按钮。点击删除按钮、删除本行!
- JQUERY动态绘制表格,实现动态添加一行,删除一行
- 动态表格,通过点击按钮增加或者删除一行表格!
- 动态添加/删除表格的一行我的办法
- 在后台 如何实现 按钮点击后 Table能动态增加一行
- DATAGRIDVIEW动态筛选数据,实现编辑之后,点击按钮更新,及删除选中的列到数据库。
- 有一行表格,点击按钮后,如何再添加一行呀
- 使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
- 使用jquery实现表格的动态添加和删除
- 动态表格,通过按钮增加行,删除时删除选择的checkbox那一行
- 表格动态添加删除一行
- Jqurey实现下拉框改变动态添加和删除表格
- 点击按钮,表格增加/删除一行