使用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>

 

效果图如下:

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

相关文章推荐

Jquery获取表格当前行中其他列中的值和input输入框中的值

Jquery获取表格当前行中其他列的值和其他列中input输入框中的值
  • Scaarf
  • Scaarf
  • 2017-05-01 01:51
  • 2986

学习使用JQuery来制作一个动态表格

今日开始学习使用JQuery,尝试利用JQuery来制作一个动态表格,结构如下 后面两个Class为空来应对可能增加的列数来调节列宽 $("div>p").parent().not($("....

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

//table 实现tabe表格中tr td的自动添加 table{ width:500px; border:1px solid #FFF; border-collapse:...

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

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

jQuery表格操作添加行、删除行和动态移动

jQuery表格操作添加行、删除行和动态移动丨芯晴网页特效丨CsrCode.Cn 添加一行  删除一行  上移  下移 序号步骤名称步骤描述相关操作 var currentStep=0...

使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...

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

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

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

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

动态添加修改删除html表格内容

1.需求需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化2.解决收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作3.代码mytest.html...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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