点击modal确定键后删除tr

Posted 2020-08-06 stone-lyl

 做第一个笔记，关于 “书单”。2016-09-03关于一个表格调用modal后，在点击表格中的删除按钮弹出modal，点击确定删除后，将一整行tr 删除的功能。

 以下内容为table，表示为某班学生。

 1    <table class="table table-bordered Stu-tab " id="Stu-tab">
 2               <tr > <td colspan="7" align="left">**班学生</td> </tr>
 3               <tr >
 4                  <th></th>
 5                  <th> id</th>
 6                  <th>姓名</th>
 7                   <th >班级号</th>
 8                   <th>学号</th>
 9                   <th>操作</th>
10              </tr>
11 12              <tr>
13                  <td>
14                      <label>
15                          <input type="checkbox"/>
16                      </label>
17                  </td>
18                  <td>1</td>
19                  <td>猪猪侠</td>
20                  <td>14040211</td>
21                  <td>14014505</td>
22                  <td>          
23                 <span class="glyphicon glyphicon-trash" aria-hidden="true"  data-toggle="modal"  data-target="#Stu-delete"   id="delete-row"></span>
24                  </td>
25              </tr>
26              <tr>
27 28              </tr>
29         </table>

以下内容为调用的modal，用的是bootstrap的插件。

 1    <div class="modal fade" id="Stu-delete">
 2         <div class="modal-dialog">
 3             <div class="modal-content">
 4                 <div class="modal-header">
 5                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 6                     <h4 class="modal-title">确认操作</h4>
 7                 </div>
 8                 <div class="modal-body">
 9                     <h3 class="text-danger">确定要删除此项？</h3>
10                 </div>
11                 <div class="modal-footer">
12                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
13                     <button type="button" class="btn btn-danger" value="deleteAlone" onclick="deleteRow()">确认删除</button>
14                 </div>
15             </div><!-- /.modal-content -->
16         </div><!-- /.modal-dialog -->
17     </div><!-- /.modal -->
18 <!--删除操作modal 上-->

这是js函数，实现如何将一整行内容删除。

function deleteRow(){
    $("#Stu-delete").modal(‘hide‘);
    var i=document.getElementById(‘delete-row‘).parentNode.parentNode.rowIndex;   //选中tr 为id爸爸的爸爸
        document.getElementById(‘Stu-tab‘).deleteRow(i);                           //删除tr
}