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

 

<!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>