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

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

动态给table添加动态航的更多相关文章

  1. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  2. JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4 ...

  3. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  4. js基础例子动态创建table实例

    <style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...

  5. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  6. 使用element-ui 组件动态合并table的行/列（第二次修改）

    这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...

  7. 动态生成Table内文字换行。

    后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...

  8. javaScript动态给下拉列表框添加选项

    方式一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></titl ...

  9. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

随机推荐

  1. Python学习 day09

    一.文件的修改 python中修改文件,可以直接通过write实现,但这种方法均比较局限.若有需求:将文件中的某内容替换为新内容,其他内容保持不变.这种需求write理论上是可以实现的,可以将一个文件 ...

  2. Restful API学习笔记

    之前关于这个概念在网上看了一些,看完似懂非懂,模模糊糊,发现专业术语或者说书面表达的形式对于理解这种十分抽象的概念还是低效了点. 书面文档方面看了以下几个: 理解本真的REST架构风格 1. 要深入理 ...

  3. git 学习之什么是版本库

    什么是版本库? 我们一般把版本库也叫仓库(repository),其实我们可以简单的把它看成一个目录,只不过目录里面的文件都会由 Git 进行管理,当我们对文件进行修改.删除.Git 都可以对其进行跟 ...

  4. 存储器的保护（二）——《x86汇编语言：从实模式到保护模式》读书笔记19

    接着上一篇博文说. 5.代码段执行时的保护 每个代码段都有自己的段界限.同栈段一个道理,有效界限和G位相关. G=0:有效界限 = 描述符中的段界限 G=1:有效界限 = 描述符中的段界限值 * 0x ...

  5. Array中对象的排序

    1.子母排序 NSArray *kArrSort = [_dic allKeys]; //这里是字母数组:,g,a,b.y,m…… NSArray *resultkArrSort = [kArrSor ...

  6. C运算符总结

    算术运算符 加减 + - 自左向右 +-同级 乘除取模 * % / 自左向右 高于+ - 自加自减 ++ -- 右结合性 高于基本算术运算符 正负 -+ 自右向左 跟++ --同级 赋值运算符 赋值 ...

  7. 标准webservice调用

    现代定义的webservice一般都倾向于restfull风格的http请求,但工作中还是会遇到前辈们写的时代代码. 我们更倾向于封装代码来调用,而不是服务引用.请看: Service.asmx服务的 ...

  8. storm之topology的启动

    一个topology的启动包括了三个步骤 1)创建TopologyBuilder,设置输入源,输出源 2)获取config 3)提交topology(这里不考虑LocalCluster本地模式) 以s ...

  9. Lucene学习之二：Lucene的总体架构

    本文转载自:http://www.cnblogs.com/forfuture1978/archive/2009/12/14/1623596.html Lucene总的来说是: 一个高效的,可扩展的,全 ...

  10. OOP 第二章作业总结

    实现策略 这里结合一下我画的第三次作业的时序图(可能有画的不好的地方)来叙述一下我的实现逻辑.最开始主线程负责创建必要的线程(输入.调度线程)与请求队列类实例:输入线程负责与人进行交互,将获取到的请求 ...