instl / javascript / bootstrap 模态框 传值

0 0

   

bootstrap 模态框 传值

2014-08-11  instl

bootstrap 模态框 传值


楼主 爱尚简单 4个月前
  1. <div class="d_table" id="d_table">
  2. <table class="table table-hover table-striped table-bordered">
  3. <thead>
  4. <tr>
  5. <th>姓名</th>
  6. <th>性别</th>
  7. <th>手机号码</th>
  8. <th>邮箱</th>
  9. <th>操作</th>
  10. </tr>
  11. </thead>
  12. <tbody id="tbody">
  13. <c:forEach items="${personList.datas}" var="person">
  14. <tr>
  15. <td>${person.personName}</td>
  16. <td>${person.personSex}</td>
  17. <td>${person.personPhone}</td>
  18. <td>${person.personMail}</td>
  19. <td><a data-target="#update" data-toggle="modal" >修改</a> | <a href="javascript:del('${person.id}')">删除</a></td>
  20. </tr>
  21. </c:forEach>
  22. </tbody>
  23. </table>
  24. </div>
  25. <div class="modal fade" id="update" aria-hidden="true">
  26. <div class="modal-dialog">
  27. <div class="modal-content">
  28. <form id="saveDeviceForm" action="saveDevice" method="post">
  29. <div class="modal-header">
  30. <button type="button" class="close" data-dismiss="modal">×</button>
  31. <h3>修改</h3>
  32. </div>
  33. <div class="modal-body">
  34. <ul>
  35. <li><span>姓名:</span><input id="name" type="text" name="personName"/></li>
  36. <li><span>性别:</span>
  37. <input id="p_man" type="radio" name="personSex" value="男"/><label for="p_man">男</label>
  38. <input id="p_woman" type="radio" name="personSex" value="女"/><label for="p_woman">女</label>
  39. </li>
  40. <li><span>手机号码:</span><input id="phone" type="text" maxlength="11" name="personPhone"/><span class="errorMeg" id="errorPhone"></span></li>
  41. <li><span>邮箱:</span><input type="text" name="personMail" id="email" onblur="checkEmail()"/><span class="errorMeg" id="errorEmail"></span></li>
  42. <li><span>地址:</span><input type="text" name="personAddress" /></li>
  43. </ul>
  44. </div>
  45. <div class="modal-footer">
  46. <a class="button" data-dismiss="modal" aria-hidden="true">取消</a>
  47. <a class="button" onclick="submitOK()">确定</a>
  48. </div>
  49. </form>
  50. </div>
  51. </div>
  52. </div>
点击删除 如何将所对应的数据传到id="update"的模态框中

爱尚简单

Bootstrap Modal

  • ----------共有2条评论------------
  • 你用的bootstrap版本是2还是3? 回复

  • @黑桃K版本3 回复


  • 2# 黑桃K 4个月前
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <!-- 最新 Bootstrap 核心 CSS 文件 -->
    6. <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    7. <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    8. <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
    9. </head>
    10. <body>
    11. <div class="d_table" id="d_table">
    12. <table class="table table-hover table-striped table-bordered">
    13. <thead>
    14. <tr>
    15. <th>姓名</th>
    16. <th>性别</th>
    17. <th>手机号码</th>
    18. <th>邮箱</th>
    19. <th>操作</th>
    20. </tr>
    21. </thead>
    22. <tbody id="tbody">
    23. <c:forEach items="${personList.datas}" var="person">
    24. <tr id="aa">
    25. <td>${person.personName}</td>
    26. <td>${person.personSex}</td>
    27. <td>${person.personPhone}</td>
    28. <td>${person.personMail}</td>
    29. <td><a href="javascript:void(0)" onclick="update(this);" >修改</a> | <a href="javascript:del('${person.id}')">删除</a></td>
    30. </tr>
    31. </c:forEach>
    32. </tbody>
    33. </table>
    34. </div>
    35. <div class="modal fade" id="update" aria-hidden="true">
    36. <div class="modal-dialog">
    37. <div class="modal-content">
    38. <form id="saveDeviceForm" action="saveDevice" method="post">
    39. <div class="modal-header">
    40. <button type="button" class="close" data-dismiss="modal">×</button>
    41. <h3>修改</h3>
    42. </div>
    43. <div class="modal-body">
    44. <ul>
    45. <li><span>姓名:</span><input id="name" type="text" name="personName"/></li>
    46. <li><span>性别:</span>
    47. <input id="p_man" type="radio" name="personSex" value="男"/><label for="p_man">男</label>
    48. <input id="p_woman" type="radio" name="personSex" value="女"/><label for="p_woman">女</label>
    49. </li>
    50. <li><span>手机号码:</span><input id="phone" type="text" maxlength="11" name="personPhone"/><span class="errorMeg" id="errorPhone"></span></li>
    51. <li><span>邮箱:</span><input type="text" name="personMail" id="email" onblur="checkEmail()"/><span class="errorMeg" id="errorEmail"></span></li>
    52. <li><span>地址:</span><input type="text" name="personAddress" /></li>
    53. </ul>
    54. </div>
    55. <div class="modal-footer">
    56. <a class="button" data-dismiss="modal" aria-hidden="true">取消</a>
    57. <a class="button" onclick="submitOK()">确定</a>
    58. </div>
    59. </form>
    60. </div>
    61. </div>
    62. </div>
    63. </body>
    64. </html>
    65. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    66. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    67.  
    68. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    69. <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    70. <script>
    71. function update(obj){
    72. var tds=$(obj).parent().parent().find('td');
    73. $('#name').val(tds.eq(0).text());
    74. $('#update').modal('show');
    75. }
    76. </script>
    我只帮你传了姓名的值,其他的依次类推,你可以把代码复制保存成html文件试试效果。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多