一开始做javaITOO,上来就给我一个我从没有接触过的bootstrap页面,让它从不可用弄成既可以增删改表格,又有input框验证,然后将页面所有信息入库,工程浩大啊!其中遇到很多技术难点:比如,如何在表格中添加输入验证,如何选中删除一行数据等。
这篇博客我就来介绍一下难中稍微简单一点的功能,如何选中表格复选框然后删除这一行的内容。这个功能花费了我一下午的时间做实验,最后还是在师姐的帮助下完成的!下面上代码:
html:
bootstrap表格:
<div class="widget-content padded clearfix">
<table class="table table-bordered table-striped table table-hover"
id="dg1">
<thead>
<th class="check-header hidden-xs">
<label>
<input id="checkAll" name="checkAll" type="checkbox" readonly><span></span></label>
</th>
<th>开始日期</th>
<th>结束日期</th>
<th class="hidden-xs">所在学校</th>
<th class="hidden-xs">证明人</th>
</thead>
<thead id="test">
<th class="check hidden-xs"><label> <input
name="checkboxtest" type="text" value="示例" style="width: 20px;font-size: 10px;" readonly><span></span></label>
</th>
<th id="beginDate">2004-09-01</th>
<th id="endDate">2009-06-20</th>
<th id="place" class="hidden-xs">北京市东城区小学</th>
<th id="teacherName" class="hidden-xs">张老师</th>
</thead>
<tbody id="mainbody">
</tbody>
</table>
删除按钮:
<!-- @*删除按钮---无弹出框*@ -->
<button id="btnDelEducate" type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteForm" οnclick="delEducate(0)">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
</button>
页面显示:
那么实现选中复选框就可以删除一整行的功能:如果放在easyui的表格中是非常简单的功能,但是如果放到bootstrap页面中,就很难,我们需要找到这一行的tr,然后删除,它没有像easyui那样封装好的table的操作。废话不多说,上代码:
可以做到批量删除和指定删除:
//删除教育行
function delEducate(display)
{
var num;
var table1 = document.getElementById('dg1');
var isChecked = document.getElementsByName('checkboxEvaluate');
var len = isChecked.length;
for(var i=len-1;i>=0;i--){
if(isChecked[i].checked==true){
num=i+2;
var tempTable=document.getElementsByTagName("table")[0]//表示页面中第几个表格,在页面中从上往下数第一个索引就是0
var tempTd=tempTable.getElementsByTagName("tr")[num]//取到第几个行
tempTd.style.display="none"//隐藏该行
}
}
}
这样就实现了选中多个或者一个复选框就可以删除对应的表格的行!只是一个假删除,没有涉及到数据库。