您的位置：首页 > Web前端 > JQuery

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

2012-03-28 21:21 621 查看

<!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插件案例：弹出对话框插入表格