jquery添加行

原创 2012年03月28日 18:39:56

点击打开链接

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 对话框   $("#dialog".dialog())-->
   <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>






版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery 动态添加或删除表格行

  • 2014年01月03日 22:46
  • 41KB
  • 下载

Jquery添加删除行

  • 2012年03月24日 10:29
  • 1KB
  • 下载

Jquery实现表格行的添加、删除

最近做一个投票管理的模块,需要添加问题选项,为了方便,就简单地实现了表格行的添加、删除。 注:需引入jquery.js 先上效果图:(form中默认有4行) 表单...
  • huchiwei
  • huchiwei
  • 2012年08月16日 12:09
  • 35628

jquery添加删除行

  • 2012年05月08日 09:33
  • 43KB
  • 下载

jquery动态表格,动态添加表格行

效果图:(打包下载) Html: html> head>     title>jquery表格操作title>     script language="javascript" src="jquer...

JQuery对表格行的添加删除

  • 2014年03月20日 20:47
  • 1KB
  • 下载

jquery添加表格行

  • 2011年08月20日 08:06
  • 20KB
  • 下载

jQuery可以计算的表单,包括单选改变价格,select改变价格,动态添加删除行计算

jQuery可以计算的表单,包括单选改变价格,select改变价格,动态添加删除行计算 各种表单情况的计算演示 JavaScript Code"text/javascript">  var curre...

jQuery中动态添加和删除行

这里,先看网页代码。 姓名 性别 卡号 会
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery添加行
举报原因:
原因补充:

(最多只允许输入30个字)