jquery插件案例：弹出对话框插入表格

来源：互联网发布：制作荣誉证书图片软件编辑：程序博客网时间：2024/05/22 03:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>通过对话框table添加tr</title><link rel="stylesheet" href="../include/ui-lightness/jquery-ui-1.8.18.custom.css" /><script type="text/javascript" src="../include/jquery-1.7.1.min.js"></script><script type="text/javascript" src="../include/jquery-ui-1.8.18.custom.min.js"></script><script type="text/javascript"> $(document).ready(function (){ $("#dialog").dialog({autoOpen:false,show:"blind",hide:"explode",modal:true,buttons:{"确定":function(){  $(this).dialog("close");    var username=$("#username").val();var hobby=$("#hobby").val();var phone=$("#phone").val();$tr=$("<tr><td>"+username+"</td><td>"+hobby+"</td><td>"+phone+"</td><td><span><a href='#'>删除</a><span></td></tr>");$("#table").append($tr);    $("span").click(function (){                         $(this.parentNode.parentNode).remove();                    });          },"取消":function(){        $(this).dialog("close");        }},draggable:true,closeOnEscape:false, title:"通过jquery设置title",width:400,height:300,position:"top",resizable:false,  //是否可以拖动尺寸大小zIndex:6          //层叠效果 当再有一个dialog才可以看出   });   var modalValue=$("#dialog").dialog("option","modal");  // alert(modalValue);   //点击链接显示对话框   $("#dialog_link").click(function (){    $("#dialog").dialog("open");  });  });</script><style type="text/css">    #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}  #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} </style></head><body>       <h1 align="center">通过对话框给table添加tr</h1>            <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>添加</a>   <div id="dialog" title="添加内容">       <br><br><br>              姓名:<input type="text" id="username"><br>              爱好:<input type="text" id="hobby"><br>              电话:<input type="text" id="phone"><br>       </div>      <br><br><br> <table width="600" border="1" id="table">    <tr bgcolor="#FF9933">    <td>姓名</td>    <td>爱好</td>    <td>电话</td>    <td>操作</td>     </tr>    </table>      </body></html>
jquery插件 案例：弹出对话框 插入表格

jquery插件案例：弹出对话框插入表格
