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 下chmod|chown|chgrp和用法和区别

    1.chgrp(改变文件所属用户组) chgrp 用户组    文件名    ###就是这个格了.如果整个目录下的都改,则加-R参数用于递归. 如:chgrp  -R    user  smb.con ...

  2. 记一次简单的关于SimpleDateFormat的优化

    # 有一个有趣的需求: (1)预先定义每天24小时不同时间段的电价 (2) 有一个list<map<timestamp,value>>: timestamp(时间戳):valu ...

  3. pointer-events属性值详解

    其实早知道这个属性,但是一直没有去研究过.今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下.嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需 ...

  4. oracle set命令详解

    SQL>set colsep '|'; //输出分隔符eg.SQL> set colsep '|';SQL> select * from dept; DEPTNO|DNAME     ...

  5. 关于80286——《x86汇编语言：从实模式到保护模式》读书笔记15

    一.80286的工作模式 80286首次提出了实模式和保护模式的概念. 实模式:和8086的工作方式相同: 保护模式:提供了存储器管理机制和保护机制,支持多任务. 二.80286的寄存器 (一)通用寄 ...

  6. WPF的ProgressBar进度条

    1. ProgressBar常用属性 1.1.  Minimum:进度条的最小值,一般为 0 1.2. Maximum:进度条的最大值,一般为100 或者是 某一个数, 如复制文件时,总文件数等 1. ...

  7. php将“\\”转换成“\”的例子

    str_replace('\\\\', '\\', $url);

  8. 腾讯云AI应用产品总监王磊：AI 在传统产业的最佳实践

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:5月23-24日,以"焕启"为主题的腾讯"云+未来"峰会在广州召开,广东省各级政府机构领导.海 ...

  9. html控件

    checkbox val = "<li class='layer'><label><input type='checkbox' checked name='la ...

  10. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...