码迷，mamicode.com
首页 > 其他好文 > 详细

动态给table添加动态航

时间：2016-08-12 11:22:59      阅读：207      评论：0      收藏：0      [点我收藏+]

标签：

Html代码  技术分享
  1. <html>  
  2.     <head>  
  3.         <title>usually function</title>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     </head>  
  6.     <script type="text/javascript" src="jquery-1.4.4.js"></script>  
  7.     <body>  
  8.           
  9.         <table border="1px" id="targetTable">  
  10.             <tr border="1px">  
  11.                 <td>序号</td>  
  12.                 <td>姓名</td>  
  13.                 <td>年龄</td>  
  14.                 <td>生日</td>  
  15.                 <td>备注</td>  
  16.             </tr>  
  17.             <tr  id="model" style="display:none" border="1px">  
  18.                 <td></td>  
  19.                 <td><input type="text" name="username"></td>  
  20.                 <td><input type="text" name="age"></td>  
  21.                 <td><input type="text" name="birthday"></td>  
  22.                 <td><input type="text" name="note"><span onclick="del(this)">删除</span></td>  
  23.             </tr>  
  24.         </table>  
  25.           
  26.         <br>  
  27.         <br>  
  28.           
  29.         用户输入表单：  
  30.         姓名<input type="text" name="u_username"><br>  
  31.         年龄<input type="text" name="u_age"><br>  
  32.         生日<input type="text" name="u_birthday"><br>  
  33.         备注<input type="text" name="u_note"><br>  
  34.         <button onclick="add()" style="font-size:12px">添加</button>  
  35.           
  36.     </body>  
  37. <html>      
  38.   
  39. <script>  
  40. function del(obj){  
  41.     //alert($(obj).closest("tr").attr("outerHTML"));  
  42.     //$(obj).closest("tr").attr("outerHTML","")  
  43.     $(obj).closest("tr").remove();  
  44.     resetSequenceNum();  
  45. }  
  46.   
  47. function add(){  
  48.     //获取表单的值  
  49.     var u_username = $("input[name=‘u_username‘]").val();  
  50.     var u_age = $("input[name=‘u_age‘]").val();  
  51.     var u_birthday = $("input[name=‘u_birthday‘]").val();  
  52.     var u_note = $("input[name=‘u_note‘]").val();  
  53.     //alert(u_username);  
  54.     //判断表单的值是否为空  
  55.     if(u_username=="" || u_username==undefined){  
  56.         alert("用户姓名不能为空");  
  57.         $("input[name=‘u_username‘]").focus();  
  58.         return false;  
  59.     }  
  60.     //缓存要赋值的内容，避免多次查询，提高效率  
  61.     var trstr = $("#model").attr("outerHTML");  
  62.     //alert(trstr);  
  63.     //复制最后一行的代码添加到表的最后一行  
  64.     $("#targetTable tr").last().after(trstr);  
  65.     //$("#targetTable").find("tr").last().after(trstr);  
  66.     //让最后一行显示出来，而不是隐藏  
  67.     //$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题，在ff中显示不正常  
  68.     $("#targetTable tr").last().css("display","");  
  69.     //赋值  
  70.     var target = $("#targetTable tr").last().find("td");  
  71.     target.find("input[name=‘username‘]").val(u_username);  
  72.     target.find("input[name=‘age‘]").val(u_age);  
  73.     target.find("input[name=‘birthday‘]").val(u_birthday);  
  74.     target.find("input[name=‘note‘]").val(u_note);  
  75.       
  76.       
  77.     resetValue();  
  78.   
  79.     resetSequenceNum();  
  80. }  
  81.   
  82. //清空表单的值  
  83. function resetValue(){  
  84.     $("input[name=‘u_username‘]").val("");  
  85.     $("input[name=‘u_age‘]").val("");  
  86.     $("input[name=‘u_birthday‘]").val("");  
  87.     $("input[name=‘u_note‘]").val("");  
  88. }  
  89.   
  90. //重新设置序号  
  91. function resetSequenceNum(){  
  92.     var num=0;  
  93.     $("#targetTable tr").each(function(index,dom){  
  94.         if(index!=0){  
  95.             $(dom).find("td").first().html(num);  
  96.             num++;  
  97.         }  
  98.     });  
  99. }  
  100.   
  101. </script>  

 

技术分享

Java代码  技术分享
  1. <html>  
  2.     <head>  
  3.         <title>usually function</title>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     </head>  
  6.     <script type="text/javascript" src="jquery-1.4.4.js"></script>  
  7.     <body>  
  8.           
  9.         <table border="1px" id="targetTable">  
  10.             <tr border="1px">  
  11.                 <td>序号</td>  
  12.                 <td>姓名</td>  
  13.                 <td>年龄</td>  
  14.                 <td>生日</td>  
  15.                 <td>备注</td>  
  16.             </tr>  
  17.             <tr id="model" border="1px" style="display:none">  
  18.                 <td></td>  
  19.                 <td><input type="text" name="username"></td>  
  20.                 <td><input type="text" name="age"></td>  
  21.                 <td><input type="text" name="birthday"></td>  
  22.                 <td><input type="text" name="note"><span onclick="del(this)">删除</span></td>  
  23.             </tr>  
  24.         </table>  
  25.         <button onclick="add()" style="font-size:12px">添加下一行</button><br>  
  26.         <button onclick="isnotEmpty()" style="font-size:12px">isEmpty</button>  
  27.           
  28.           
  29.     </body>  
  30. <html>      
  31.   
  32. <script>  
  33. function del(obj){    
  34.     $(obj).closest("tr").remove();    
  35.     resetSequenceNum();  
  36. }  
  37.   
  38. function add(){  
  39.     if(isnotEmpty()){  
  40.         //缓存要赋值的内容，避免多次查询，提高效率  
  41.         var trstr = $("#model").attr("outerHTML");  
  42.         //复制最后一行的代码添加到表的最后一行  
  43.         $("#targetTable tr").last().after(trstr);  
  44.         //让最后一行显示出来，而不是隐藏  
  45.         //$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题，在ff中显示不正常  
  46.         $("#targetTable tr").last().css("display","");  
  47.         resetSequenceNum();  
  48.     }else{  
  49.       
  50.     }  
  51.       
  52. }  
  53.   
  54. //检查添加的内容不能为空  
  55. function isnotEmpty(){  
  56.     //缓存要赋值的内容，避免多次查询，提高效率  
  57.     var trstr = $("#model").attr("outerHTML");  
  58.     //删除第一个tr，也就是模板  
  59.     //$("#targetTable tr").first().remove();  
  60.     $("#model").remove();  
  61.     //alert(trstr);  
  62.       
  63.     var flag = true;  
  64.       
  65.     $("#targetTable input").each(function(index,ele){  
  66.         var obj = $(ele);  
  67.         var value = obj.val();  
  68.         if(""==value || undefined==value){  
  69.             alert(obj.attr("name")+ "为空");  
  70.             obj.focus();  
  71.             flag = false;  
  72.             return false;  
  73.         }  
  74.     });  
  75.     //将模板添加回来  
  76.     $("#targetTable tr").first().after(trstr);  
  77.     return flag;  
  78. }  
  79.   
  80. //重新设置序号  
  81. function resetSequenceNum(){  
  82.     var num=0;  
  83.     $("#targetTable tr").each(function(index,dom){  
  84.         if(index!=0){  
  85.             $(dom).find("td").first().html(num);  
  86.             num++;  
  87.         }  
  88.     });  
  89. }  
  90.   
  91. </script>  

 

 技术分享

动态给table添加动态航

标签：

原文地址：http://www.cnblogs.com/prefect/p/5764041.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！