点击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">&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 }

 

 
复制代码

 

 
复制代码

 

posted @   stone-lyl  阅读(1266)  评论(2编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示