jquery添加行

duoerbasilu

浏览: 1482490 次

最近访客更多访客>>

Beryl

leontius

xld800

HBSU614

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1527)

社区版块

存档分类

2012-07 ( 651)
2012-06 ( 163)
2012-05 ( 163)
更多存档...

点击打开链接

html:

<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.th{
background:#F90;
color:#666;
font-size:16px}
.odd{

background-color:#C66;}
</style>

<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.8.18.custom.css">

<script language="javascript" type="text/javascript">
//当窗体加载完毕的时候触发该匿名函数
//$(document) //把dom对象转换成jQuery对象
//$(document).ready(function(){})
$(function (){

$("#dialog").dialog({

autoOpen:false,
show:"bind",
//modal:true,
buttons:[
{
text:"添加",
click:function add(){
var tr=$("<tr></tr>");
var td1="<th>"+$("#name").val()+"</th><th>"+$("#password").val()+"</th><th>"+$("#email").val()+"</th>";
tr.append(td1);
var table=$("#table1");
table.append(tr);

//$(this).dialog("close");

}

},{
text:"取消",
click:function (){

$(this).dialog("close");

}

}
],
draggable:true,
position:"center",
closeOnEscape:false,
width:600,
height:300,
resizable:false,
zIndex:-4,
hide:"explode"

});
$("#dialog_link").click(function (){

$("#dialog").dialog("open");

});

});

</script>

</head>
<body>
<h1>模拟dialog效果</h1>

<table width="500" border="1" id="table1">
<tr>
<th class="th">姓名</th>
<th class="th">密码</th>
<th class="th">邮箱</th>
</tr>
<tr>
<th>张三</th>
<th>123456</th>
<th>9776845943@qq.com</th>
</tr>
<tr>
<th>李四</th>
<th>123456</th>
<th>859486958@qq.com</th>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<a href="#" id="dialog_link"class="ui-state"><span>create new tr</span></a>

<div id="dialog" align="center">

姓名：<input name="" type="text" id="name"/><p>
密码：<input name="" type="text" id="password"/><p>
email：<input name="" type="text" id="email"/><p>

</div>

</body>
</html>

分享到：