jquery实现自动添加table表格及内容

原创 2012年03月22日 20:15:44
//table 实现tabe表格中tr td的自动添加
<style type="text/css">
table{
    width:500px;
    border:1px solid #FFF;
    border-collapse:collapse;
    }
table tr
        {
        border:1px #FFF solid;
        }
table tr td
        {
        border:1px #FFF solid;
        }
</style>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    
    $("#tijiao").click(function(){
        //获取用户名
        var $user=$("#user").val();
        //获取email
         var $email=$("#email").val();
        //获取电话号
        var $tel=$("#telephone").val();
        var $tr=$("<tr><td>"+$user+"</td><td>"+$email+"</td><td>"+$tel+"</td><td><a href='javascript:void(0)' class='a'>删除</a></td></tr>");
        //alert($tr);
        $tr.appendTo("#table1");
        $(".a").click(function(){
            $(this).parent().parent().remove();
            });
        });
        
    
    });

</script>
</head>
<body>
<div style="width:700px; height:300px; background:#999; margin:auto">
<p style="margin-left:300px">添加用户</p>
姓名:<input type="text" id="user"> email<input type="text" id="email"> 电话<input type="text" id="telephone"><br>
<input type="button" id="tijiao" value="提交" align="middle" style="margin-left:300px;">
<hr>
<table align="center"  border="1" id="table1">
<tr><th>姓名</th><th>email</th><th>电话</th></tr>
</table>
</div>





最简单的jQuery创建表格

最简单的jQuery创建表格         利用jQuery创建表格、主要是用到jQuery的两个方法:appendTo($("#nodeId"))、append(“html”) 、先使用jQuer...

jquery ajax自动生成表格table(一)

自己参与的项目需要在查询的时候通过异步操作,来把数据添加到table中,就暂时用这个方法替代了一下...

一个简单的jQuery例子,动态添加表格和删除

一个简单的jQuery例子,动态添加表格和删除

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

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

jQuery 往table添加新内容有以下四个方法:

jQuery 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选...
  • mggwct
  • mggwct
  • 2016年08月01日 18:13
  • 4695

jquery ajax自动生成表格table基础

本文转自:http://blog.csdn.net/chunqiuwei/article/details/10160587 首先在jsp页面设定一个table骨架,首先把该table的dis...

Jquery动态删除添加表格中的内容

在做项目时候,需要动态的对表格中的数据进行删除和添加,这里说一下我的思路。 1、通过获取Servlet传过来的List集合,将数据显示在Table表格中 ...

JQuery动态生成Table表格

主要用到了JQuery中的append和appendto的方法,具体代码如下:
  • jumtre
  • jumtre
  • 2014年10月17日 15:23
  • 7819

js实现表格添加数据

js实现表格添加数据 HTML代码: Title function add(){ var tab=$("...

用JQuery去实现单个表格中的td数据修改

JS代码如下: $(document).ready(function(){ var tds =$("td"); tds.click(tdclick); }); function td...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现自动添加table表格及内容
举报原因:
原因补充:

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