【bootstrap】---选中一行删除（页面操作）

发布时间：2020-12-17 20:58:34 所属栏目：安全来源：网络整理

导读：?一开始做javaITOO，上来就给我一个我从没有接触过的bootstrap页面，让它从不可用弄成既可以增删改表格，又有input框验证，然后将页面所有信息入库，工程浩大啊！其中遇到很多技术难点:比如，如何在表格中添加输入验证，如何选中删除一行数据等。 ? ? ? ? 这

?一开始做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" onclick="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"//隐藏该行
                   }
                  }               
 
        }

这样就实现了选中多个或者一个复选框就可以删除对应的表格的行！只是一个假删除，没有涉及到数据库。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!