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. Linux 系统下安装 mysql5.7.25（glibc版）

    前言:经过一天半的折腾,终于把 mysql 5.7.25 版本安装上了 Amazon Linux AMI release 2017.09 系统上,把能参考的博客几乎都看了一遍,终于发现这些细节问题,然 ...

  2. nginx常用配置2

    ## 一.Nginx中虚拟主机配置 ### 1.基于域名的虚拟主机配置 1.修改宿主机的hosts文件(系统盘/windows/system32/driver/etc/HOSTS) ​ linux : ...

  3. Oracle PL/SQL编程之函数

    注: 以下测试案例所用的表均来自与scott方案,使用前,请确保该用户解锁. 代码的执行环境是在sqlplus中 1.简介 函数用于返回特定的数据,当建立函数时,函数头部必须包含return子句,而在 ...

  4. PHP设置时区

    <?php//设置默认的时区date_default_timezone_set('Asia/Shanghai');//输出1396193923对应的日期echo date("Y-m-d ...

  5. 【随笔】MIME类型

    在openResty作为Web服务器的情况下访问根目录的首页时,出现了这样一个问题: nginx端的配置: worker_processes 2; error_log logs/error.log; ...

  6. spring mvc中的控制器方法中的参数从哪里传进来？

    编写控制器方法的时候很奇怪,spring是怎么知道你控制器方法的参数类型,并且注入正确的对象呢? 比如下面这样 @RequestMapping(value="/register", ...

  7. ELF文件解析器支持x86x64ELF文件

    此文为静态分析ELF文件结构,遍历其中Elf_Ehdr文件头信息,遍历Elf_Shdr节表头信息,并将所有节放置在左侧树控件上,遍历Elf_Phdr程序头也放置在左侧树控件上,并着重分析字符串表,重定 ...

  8. weblogic JDBC Connection Pools--转官方文档

    http://docs.oracle.com/cd/E13222_01/wls/docs81/ConsoleHelp/jdbc_connection_pools.html#1106016 JDBC C ...

  9. [PY3]——实现一个优先级队列

    import heapq class PriorityQueue: def __init__(self): self._queue=[] self._index=0 def push(self,ite ...

  10. luajit+nginx+上传模块+lua模块编译安装

    git clone https://github.com/fdintino/nginx-upload-module.git git clone https://github.com/openresty ...