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学习 day10

    一.默认参数的陷阱 先看如下例子: def func(li=[]): li.append(1) print(li) func() func() func(li=['abc']) func() 结果: ...

  2. 微信小程序踩坑

    微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示

  3. Ubuntu 18.04 安装 odoo12 源码版

    更新和升级 在我们进入安装过程之前,你应该更新和升级Ubuntu.打开终端窗口,发出以下命令: sudo apt-get updatesudo apt-get upgrade 注意:如果内核升级,则必 ...

  4. DataBind()方法实现数据绑定

    在为.aspx页上的对象设置了特定数据源之后,必须将数据绑定到这些数据源上.可以使用“Page.DataBind()”或“控件.DataBind()”方法将数据绑定到数据源上. 主要差别在于:调用Pa ...

  5. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  6. AngularJs学习笔记--Creating Services

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...

  7. JS模块加载系统设计V1

    一.require模块 +function() { var path = location.protocol + "//" + location.host +"/Java ...

  8. (转载)Eclipse快捷键大全

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  9. 关于echar彩色柱状图颜色配置问题

    在做配置页面的时候,有这样一个需求,用户可以选择配置是单色柱状图或者彩色的柱状图,并且颜色可以自定义的 思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建option的值 ...

  10. swift与OC混编之调用函数

    在桥接头文件里#import oc的.h文件,整个swift工程都能使用该oc文件,在.h里暴露的方法都能被该工程使用 //oc文件 TestOC.h #import @interface TestO ...