使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)

原创 2012年03月22日 20:49:51

<!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>jquery实现添加、移除表格</title>
 </head>
<style>
table{
 margin:auto auto;

background-color:#9FC;}
 td{
  width:80px;}
</style>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function (){
   
    $("#btn1").click(function (){
        //创建tr节点
    var $tr=$("<tr></tr>");  
       //遍历获取输入的内容
     $("#info input:text").each(function (index,domEle){
      //添加td节点
       var $td=$("<td></td>");
        //将内容循环添加到创建好的TD中
    $td.append($(domEle).val());
    //将td添加到创建好的TR 中
    $td.appendTo($tr);
      });
      //创建TD--删除
    var $td=$("<td><a href='#' class='del'>delete</a></td>");
      //将内容循环添加到创建好的TD中
        $td.appendTo($tr);
        $tr.appendTo("#tab");
    
       //执行删除操作
          $(".del").click(function (){
      //alert("@@@@@@@@@@@@");
      $(this).parent().parent().remove();
    
     });
     });
  
    });

 


</script>
<body>
<form id="info" method="post">
姓名:<input type="text" id="user">
班级:<input type="text" id="greed">
年龄:<input type="text" id="age">
<input type="button" id="btn1" value="添加">
</form>
<br>
<br>
<br>
<table id="tab" border="1">
<tr id="t1">
  <td>姓名</td>
  <td>班级</td>
  <td>年龄</td>
  <td>是否删除</td>
</tr>
</table>

</body>
</html>

 

效果图如下:

js+jquery实现增加或删除表格中的一行数据

jquery和js代码如下(该方法有bug,至少要留一个模板,否则,之后不能再新增行): function setIndex() { var i = 2; $(".rsnum").e...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery实现动态添加和删除表格

无标题文档 $(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=...
  • HUMHSX
  • HUMHSX
  • 2012年03月22日 21:07
  • 5479

jQuery清空table表格除首行外的所有数据(ajax+ js实现动态画表及刷新数据)

其中tb是table的id。$(“#tb tr:not(:first)”).html(“”); 或者是 $(“#tb tr:not(:first)”).empty(“”);jQuery清空tab...
  • lz37025
  • lz37025
  • 2017年04月22日 15:39
  • 2384

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

JS代码如下: $(document).ready(function(){ var tds =$("td"); tds.click(tdclick); }); function td...

jquery实现点击表格修改信息!

JQuery示例:可以编辑的表格 ...

ajax异步获取数据后动态向表格中添加数据(行)

ajax js 动态添加数据 table

javascript动态添加删除表格数据管理

本文和大家分享一下使用javascript动态添加删除表格数据管理,主要实现功能如下: 点击添加按钮可以添加一个空的可以修改的记录。 点击表格单元格可以修改文本。 修改后实现了保存的接口...

Ajax添加数据与删除篇

作者:康董 我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬.Hello 大家好!这个ajax系列教程讲到这里已经完成50%了.第4篇讲了a...

异步获取数据Ajax,以及对获取的数据进行绑定(显示在页面上)

最近,经常用Ajax去异步获取数据,今天就把它总结一下 1.Ajax是异步的JavaScript和XML,它可以在不更新网页的情况下,从后台加载(获取)数据,并显示在网页上 2.主要方法 (1)...
  • muyeju
  • muyeju
  • 2015年09月09日 11:47
  • 8677
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
举报原因:
原因补充:

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