首页 新闻 搜索 专区 学院

紧急求助 jquery动态添加表单数据 在线

0
悬赏园豆:30 [已解决问题] 解决于 2013-11-13 10:02

http://www.codefans.net/jscss/code/3987.shtml

copy 这个 但是 首先点击增加一个 输入内容 再次点击 增加 把输入内容情空了  那位大神 帮看下如何 改写 帮看下  谢谢了

就这些豆子了 我在线 等 哈

76晴的主页 76晴 | 初学一级 | 园豆:8
提问于:2013-11-12 16:30
< >
分享
最佳答案
0
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>新增或删除表格文本框</title>
 5 <meta http-equiv="content-type" content="text/html;charset=gb2312">
 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 7 <script type="text/javascript">
 8 $(document).ready(function(){
 9 /*添加行数据*/
10 $(".J_add").click(function(){
11 var this_html=$(this).parents("tr").html();//当前新增所在行的html
12 $(this).parents("tr").find('input').val('');//将input的内容清空
13 var after_tr=$(this).parents("tr").after("<tr class='after_tr'></tr>");//向当前行插入一行tr
14 var after_tr=$(".after_tr");//选择插入行的类名
15 after_tr.html(this_html);//把变量this_html内容插入到创建后的空tr中
16 after_tr.find(".J_add").addClass("J_del").removeClass("J_add").text("删除");//把原来新增操作改成删除操作,并且把它的类名改成J_del
17 });
18 //移除方法
19 $(".J_del").live("click",function(){
20 $(this).parents("tr").remove();
21 }); 
22 })
23 </script>
24 </head>
25 <body>
26 <table>
27 <thead><tr><td>SKU</td><td>赠送数量</td><td>单价</td><td>总价</td><td>操作</td></tr></thead>
28 <tbody>
29 <tr>
30 <td><input type="text" name="ssd"></td>
31 <td><input type="text"></td>
32 <td>$44</td><td>$22</td>
33 <td><a class="J_add">新增</a></td>
34 </tr>
35 </tbody>
36 </table>
37 </body>
38 </html>

主要在12行加了代码,你看看是不是要这个效果

收获园豆:30
fly2006zhao | 菜鸟二级 |园豆:232 | 2013-11-12 16:59

我不是要把输入内容清空 ,我表达的有问题

你点击那个连接 运行 用火狐什么的别用iE 点击新增增加一行之后 在新增加的行中输入内容

在点击新增 ,这次新增的内容就被清空了  你试一下

 

麻烦了 感谢

此时点击新增 这个内容 就被清空 了 就要解决这个问题 我表达能力 太二了

76晴 | 园豆:8 (初学一级) | 2013-11-12 17:10

我不是要把输入内容清空 ,我表达的有问题

你点击那个连接 运行 用火狐什么的别用iE 点击新增增加一行之后 在新增加的行中输入内容

在点击新增 ,这次新增的内容就被清空了  你试一下

 

麻烦了 感谢

此时点击新增 这个内容 就被清空 了 就要解决这个问题 我表达能力 太二了

76晴 | 园豆:8 (初学一级) | 2013-11-12 17:10

@76晴: 没明白哎

fly2006zhao | 园豆:232 (菜鸟二级) | 2013-11-12 17:18

@76晴: 你是想要第二行的内容在还是不要在

fly2006zhao | 园豆:232 (菜鸟二级) | 2013-11-12 17:19
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>新增或删除表格文本框</title>
 5 <meta http-equiv="content-type" content="text/html;charset=gb2312">
 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 7 <script type="text/javascript">
 8 $(document).ready(function(){
 9     /*添加行数据*/
10     $(".J_add").click(function(){
11         $('#tb').append(' <tr><td><input type="text" name="ssd"></td><td><input type="text"></td><td></td><td></td><td><a class="J_del">DEL</a></td></tr>');
12     });
13     //移除方法
14     $(".J_del").live("click",function(){
15         $(this).parents("tr").remove();
16     }); 
17 })
18 </script>
19 </head>
20 <body>
21 <table>
22   <thead><tr><td>SKU</td><td>赠送数量</td><td>单价</td><td>总价</td><td>操作</td></tr></thead>
23   <tbody id="tb">
24     <tr>
25     <td><input type="text" name="ssd"></td>
26     <td><input type="text"></td>
27     <td>$44</td><td>$22</td>
28     <td><a class="J_add">新增</a></td>
29     </tr>
30   </tbody>
31 </table>
32 </body>
33 </html>

这个效果貌似是你要的效果,你看看,实现吧比较的土鳖,如果是你要的效果的话,我在给你看着改改

fly2006zhao | 园豆:232 (菜鸟二级) | 2013-11-12 17:30

@76晴: 下班了回家了,就不等你的回复了

fly2006zhao | 园豆:232 (菜鸟二级) | 2013-11-12 17:40

@fly2006zhao: 朋友就是这样的

76晴 | 园豆:8 (初学一级) | 2013-11-12 17:49

我自己整吧就按你这个 来 不改了 明天结贴

76晴 | 园豆:8 (初学一级) | 2013-11-12 17:53
其他回答(2)
0
<!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>
<title>新增或删除表格文本框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        /*添加行数据*/
        $(".J_add").click(function() {
            var txt = "<tr><td><input type='text' name='ssd'></td><td><input type='text'></td><td>$44</td><td>$22</td><td><a class='J_del'>删除</a></td></tr>";
            $(this).parents("tbody").append(txt);
        });
        //移除方法
        $(".J_del").live("click", function() {
            $(this).parents("tr").remove();
        });
    })
</script>
</head>
<body>
<table>
  <thead><tr><td>SKU</td><td>赠送数量</td><td>单价</td><td>总价</td><td>操作</td></tr></thead>
  <tbody>
    <tr><td><input type="text" name="ssd"></td><td><input type="text"></td><td>$44</td><td>$22</td><td><a class="J_add">新增</a></td></tr>
  </tbody>
</table>
</body>
</html>

拿去吧

小草__ | 园豆:194 (初学一级) | 2013-11-12 16:50
0

哈哈,我刚好写了一个类似的例子,你参考一下吧:http://runjs.cn/detail/qz4ue13n

袁家小黑球 | 园豆:1045 (小虾三级) | 2013-11-12 22:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册