1. 做第一个笔记,关于 “书单”。2016-09-03关于一个表格调用modal后,在点击表格中的删除按钮弹出modal,点击确定删除后,将一整行tr 删除的功能。
  2.  
  3. 以下内容为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. <tr>
  12. <td>
  13. <label>
  14. <input type="checkbox"/>
  15. </label>
  16. </td>
  17. <td>1</td>
  18. <td>猪猪侠</td>
  19. <td>14040211</td>
  20. <td>14014505</td>
  21. <td>
  22. <span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="modal" data-target="#Stu-delete" id="delete-row"></span>
  23. </td>
  24. </tr>
  25. <tr>
  26. </tr>
  27. </table>
  1. 以下内容为调用的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 上-->
  19.  
  20. 这是js函数,实现如何将一整行内容删除。
  1. function deleteRow(){
  2. $("#Stu-delete").modal('hide');
  3. var i=document.getElementById('delete-row').parentNode.parentNode.rowIndex; //选中tr 为id爸爸的爸爸
  4. document.getElementById('Stu-tab').deleteRow(i); //删除tr
  5. }
  1.  
  1.  
  1.  
  1.  

点击modal确定键后删除tr的更多相关文章

  1. 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  2. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  3. Intellj IDEA光标替insert状态,back键无法删除内容

    Intellj IDEA光标为insert状态,无法删除内容导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标,并且还无法删除内容,且按删除(delete)键也只见 ...

  4. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  5. jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...

  6. Android使用Home键后应用程序重启的问题

    正常情况应该是在点击 home 按键后,程序在后台暂停运行,点击 后退键 才会退出应用的,但是今天遇到个问题,点击 home 键后,重新再打开应用却每次都返回应用启动页面,有些莫名其妙,一番googl ...

  7. Android按下home键后重新打开app进入主activity的问题

    问题阐述: 当我们写一款App的时候,势必会有这种情况:用户已经进行了多级的操作,现返回栈中已存在多个activity,那么这个时候我们想回到最初的activity难道要一层层的返回吗,对用户来说 无 ...

  8. Android应用Home键后Launcher重复启动问题

    通过系统方式(系统安装器)安装应用,点击"打开"按钮,进入应用主界面,按home键后,点击应用图标进入,应用会出现重新启动.当完全退出应用后,再通过启动图标进入应用,便不会出现重复 ...

  9. Mysql中的外键分析(什么是外键,为什么要用外键,添加外键,主外键关联删除)

    有一个东西一直在我脑海中是个很烦的东西,但是这东西不搞清楚会阻碍自己的前进.自己做项目demo永远只能用一张表... 所以今天还是学习了下外键希望能够搞明白一些... 百度上搜索外键的作用" ...

随机推荐

  1. 下拉框点链接js

    $("#input_text").click(function(){ $("#input_fonts").show(); }); $("#input_ ...

  2. Ci框架整合smarty模板引擎

    Ci框架整合smarty模板引擎 备注:下载smarty时,最好选择2.6版本,其他测试有坑,ci可以是2.2或其他 大体思路:将smarty封装成ci框架的一个类,然后重新配置一下smarty,这样 ...

  3. ANDROID_MARS学习笔记_S01原始版_013_广播机制二

    一.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...

  4. 读写UTF-8、Unicode文件(加上了文件头,貌似挺好用)

    conf配置文件一些为UTF-8和Unicode格式,这样便可良好的支持多语言,从网上查阅资料后,将读写UTF-8.Unicode文件写了几个最精简的函数,更新后加了是否写文件头的功能,以适应更多需要 ...

  5. ruby 方法重载

    class MyClass def sayHello return "hello from MyClass" end def sayGoodbye return "Goo ...

  6. SQL Server 连接字符串和身份验证详解

    SQL Server .NET Data Provider 连接字符串包含一个由一些属性名/值对组成的集合.每一个属性/值对都由分号隔开.          PropertyName1=Value1; ...

  7. Good vs Evil

    Good vs Evil Description Middle Earth is about to go to war. The forces of good will have many battl ...

  8. Grid表格属性

    <Grid> <Grid.ColumnDefinitions> <!--添加列--> <ColumnDefinition Width="/> ...

  9. [转] KMP算法详解

    转载自:http://www.matrix67.com/blog/archives/115 KMP算法详解 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第六个自然段.    我们这里说的K ...

  10. 【转】Android source build/envsetup.sh学习笔记

    原文网址:http://blog.csdn.net/mliubing2532/article/details/7567164 如果你只需要修改某一个模块的内容,但是却每次都要执行make, 最后等待很 ...