首页 > 代码库 > 点击modal确定键后删除tr
点击modal确定键后删除tr
做第一个笔记，关于 “书单”。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">×</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}
点击modal确定键后删除tr
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。