紧急求助 jquery动态添加表单数据 在线
0
悬赏园豆：30
[已解决问题]
解决于 2013-11-13 10:02
http://www.codefans.net/jscss/code/3987.shtml
copy 这个 但是 首先点击增加一个 输入内容 再次点击 增加 把输入内容情空了 那位大神 帮看下如何 改写 帮看下 谢谢了
就这些豆子了 我在线 等 哈
最佳答案
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
我不是要把输入内容清空 ，我表达的有问题
你点击那个连接 运行 用火狐什么的别用iE 点击新增增加一行之后 在新增加的行中输入内容
在点击新增 ，这次新增的内容就被清空了 你试一下
麻烦了 感谢
此时点击新增 这个内容 就被清空 了 就要解决这个问题 我表达能力 太二了
我不是要把输入内容清空 ，我表达的有问题
你点击那个连接 运行 用火狐什么的别用iE 点击新增增加一行之后 在新增加的行中输入内容
在点击新增 ，这次新增的内容就被清空了 你试一下
麻烦了 感谢
此时点击新增 这个内容 就被清空 了 就要解决这个问题 我表达能力 太二了
@76晴: 没明白哎
@76晴: 你是想要第二行的内容在还是不要在
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>
这个效果貌似是你要的效果，你看看，实现吧比较的土鳖，如果是你要的效果的话，我在给你看着改改
@76晴: 下班了回家了，就不等你的回复了
@fly2006zhao: 朋友就是这样的
我自己整吧就按你这个 来 不改了 明天结贴
其他回答(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>
拿去吧
0
