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. [转]asp:ScriptManager

    概述 ScriptManager 控件管理用于 Microsoft ASP.NET AJAX 页面的客户端脚本.默认情况下,ScriptManager 控件将 Microsoft AJAX 库的脚本与 ...

  2. SuperMap iClient for JavaScript 之关联查询

    人们常说,计划赶不上变化.同样的,在项目中,使用的数据也是在不断变化的,尤其是属性信息的改变.就比如说,地图上的地物,它的空间信息在比较长的时间内,都不会发生变化,他的属性信息在初期不完整或者与后来的 ...

  3. Django级联删除的选项

    Django级联删除的选项 Django模型中的on_delete属性具有如下选项: CASCADE 级联删除,也就是被引用的实体被删除后,相关的记录信息都会被删除. PROTECT 阻止删除被引用的 ...

  4. 用.net 2.0(或.net 3.5)开发的程序在.net 4.0的环境中运行的解决方案

    引用:.NET2.0程序集无法在.net 4.0 中运行的解决方案 1. 原来是在.net 2.0 (VS2008)的环境下的程序,通过升级到.net 4.0 (VS2013)导致程序运行不了 提示需 ...

  5. zato——Channels Outgoing connections

    Channels,服务获得请求.方式 AMQP JMS WebSphere MQ plain HTTP SOAP ZeroMQ 其中,只有HTTP是同步的 Plain HTTP和SOAP暴漏服务直接通 ...

  6. linux diff(differential) 命令

    功能说明:比较文件的差异. 语法:diff [OPTION]... FILES 实例: diff -ur temp1 temp2 diff -ur temp1 temp2 > temp.diff ...

  7. view向全屏延伸时的属性设置

    从iOS7 开始,当视图被navigationbar和tabbar包裹时,view默认会延伸到状态bar下面, 1.如果要让view贴着上下的状态bar展示,可以在viewDidLoad中设置属性 s ...

  8. ddddddeeeessssssttttrrrrrrooooooyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

    我遥远的 POI 计划啊 https://loj.ac/problems/search?keyword=POI2011 atcoder 一套 动态 DP SAM 随便看 XSY 的题 UOJ Roun ...

  9. 在 Web 应用中创建 Node.js 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...

  10. 重构指南 - 分解复杂判断（Remove Arrowhead Antipattern）

    当代码中有多层嵌套时,会降低代码的可读性,对于以后的修改也增加难度,所以我们需要分解复杂的判断并尽快返回. 重构前代码 public class Security { public ISecurity ...