input添加表格,删除内容

原创 2012年03月22日 22:20:55
<!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>无标题文档</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.7.1.min.js"></script>
</head>
<script language="javascript" type="text/javascript" >
//使用jquery加载事件
$(document).ready(function(){
//追加tr
var $i=1;
$("#btn1").click(function(){
$i++;
var $tr=$("<tr  id='tr"+$i+"'><tr>");

$tr.appendTo("#table");
$("input[type=text]").each(function(index,domEle){
   //alert(this.value); //dom
   //alert($(this).val()); //jquery

   //用jquery创建一个节点
  var $td=$("<td>"+$(this).val()+"</td>");
  //将创建的文本节点追加到#table中
  $td.appendTo("#tr"+$i);
 
 });
  var $td2=$("<td> <a href='#' id='"+$i+"'>Delete</a></td>");
 
   $td2.appendTo("#tr"+$i);
//删除tr
$("a").click(function(){
//获取a 的id值
alert($(this).attr('id'));
  $("table tr").remove("#tr"+$(this).attr('id'));
});


});


});








</script>
姓名:  <input type="text" id="name" /><br />
E-mail:<input type="text" id="email" />
<input type="button" id="btn1" value="插入数据" />
<table id="table" width="475" border="1">
  <tr>
    <td width="88">姓名</td>
    <td width="54">email</td>
    <td width="54"></td>
  </tr>
  <tr id="tr1">   <td>张三丰</td><td>114412@qq.com</td>  <td ><a  href="#" id="1">Delete</a></td></tr>


   
</table>


</body>
</html>

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

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

jquery 动态添加、按顺序添加input文本框并且实现删除操作

1.先来一张图来告诉我们今天要实现什么 蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“  点击蓝色按钮减号就会减少相对应的那一行还有索引也会减...
  • m0_37836194
  • m0_37836194
  • 2017年11月01日 10:34
  • 525

动态添加删除table页面一行input表格

之前写过两篇关于HTML页面添加结点,删除结点的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行,删除行,碰巧那会儿比较闲,就动手写了一下,记录下来,希望能帮到需要的朋友们。 上面的代码中...
  • magi1201
  • magi1201
  • 2015年04月15日 23:06
  • 10700

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

1.需求需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化2.解决收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作3.代码mytest.html...
  • zhang_ruiqiang
  • zhang_ruiqiang
  • 2015年07月14日 10:56
  • 3339

解决input原本保存的内容不能修改,但可以添加的问题

时隔好多好多天,我又满血复活了,首先解决了一个大问题。刚到公司,领导给安排了一个小任务,是公司马上推出的项目用到的。一个文本框,里面有原来保存的手机号,现在点击修改按钮可以添加,但是不能删除原来保存的...
  • zuijiao__shangyang
  • zuijiao__shangyang
  • 2017年03月27日 20:18
  • 973

js添加删除文本框

var count = 1; //用来判断是删除 还是增加按钮 以便count值进行计算 function checkCount(boolOK, coun) { ...
  • huangxinyu_it
  • huangxinyu_it
  • 2013年12月23日 10:53
  • 1673

可以增加和删除行的table(可以编辑表格中内容)

可以增加和删除行的table(可以编辑表格中内容)
  • shfei10100
  • shfei10100
  • 2014年06月16日 11:15
  • 2094

Html/javascript动态添加/删除input控件到地址定位置

Html/javascript动态添加/删除input控件到地址定位置 发布 另存 成果基本信息修改: 成果名:成果位置: ...
  • dusea
  • dusea
  • 2015年09月01日 11:18
  • 1143

使用js实现表格增加与删除

new document window.onload = function(){ var mytr=document.getElem...
  • qq_35655129
  • qq_35655129
  • 2016年07月25日 10:41
  • 4063

JavaScript动态添加/删除表格行

使用原生JavaScript来解决简单的table行动态增删问题
  • sqq0103
  • sqq0103
  • 2016年12月16日 22:23
  • 1120
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:input添加表格,删除内容
举报原因:
原因补充:

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