专栏首页姚红专栏jquery实现表格动态添加

jquery实现表格动态添加

//点击追加触发 $(function(){ $("#button").click(function(){ var div_ = $("#sel").val(); var context = $("#context").val(); append(div_,context); //$("#tab tr:not(:first)").remove(); //$("#tab tbody").empty(); $("#tab tbody").remove(); query(); }); }); //点击查询全部触发 $(function(){ $("#but").click(function(){ $("#tab tbody").remove(); //$("#tab tr:not(:first)").remove(); //$("#tab tbody").empty(); query(); }); }); //点击模糊查询触发 $(function(){ $("#query").click(function(){ var context = $("#context").val(); alert("您输入的内容为:"+context); $("#tab tr:not(:first)").empty(); //$("table tbody").remove(); queryByContext(); }); }); //删除事件 function del(id){ var url = "testController/delModel"; $.ajax({ type: 'POST', url: url, data:{id: id}, dataType: 'json', success: function(data){ alert("数据库删除成功"); $("#tab tr:not(:first)").empty(); query(); }}); }; //编辑事件 function upd(id){ var url = ""; $.ajax({ type: 'POST', url: url, data:{id: id}, dataType: 'json', success: function(data){ alert("数据库编辑成功"); $("#tab tr:not(:first)").empty(); query(); }}); } //添加方法 function append(div_,context){ $("#"+div_).append("<tr><td>"+ div_ +"</td>"+"<td>"+context+"</td></tr>"); $.get("testController/addModel",{div_id: div_, context: context }).done(function( data ) { alert("添加到数据库成功"); }); }; //模糊查询方法 function queryByContext(){ var url = "testController/queryAllDataByContext"; $.ajax({ type: 'POST', url: url, data:{context:$("#context").val()}, dataType: 'json', success: function(data){ alert("数据库查询成功"); console.log(data); for(var i=0;i<data.length;i++){ var id = data[i].id; var divId = data[i].divId; var context = data[i].context; var dtt = data[i].dtt; //alert(id); $("#tab thead").append("<tr><td>"+id+"</td>"+"<td>"+divId+"</td>"+"<td>"+context+"</td>"+"<td>"+dtt+"</td>"+"<td><a class='del'onclick='del("+id+")'>删除</a></td></tr>"); } }, error:function(){ alert("数据库查询失败"); } }); }; //查询全部方法 function query(){ var url = "testController/queryAllData"; $.ajax({ type: 'POST', url: url, dataType: 'json', success: function(data){ alert("查询成功"); console.log(data); for(var i=0;i<data.length;i++){ var id = data[i].id; var divId = data[i].divId; var context = data[i].context; var dtt = data[i].dtt; //alert(id); // $("#tab tbody").remove(); $("#tab").append("<tr><td>"+id+"</td>"+"<td>"+divId+"</td>"+"<td>"+context+"</td>"+"<td>"+dtt+"</td>"+"<td><button onclick='del("+id+")'>删除</button></td>"+"<td><button onclick='upd("+id+")'>编辑</button></td></tr>"); } }, error:function(){ alert("查询失败"); } }); };

</script> </head> <body> DIV名:<select id="sel"> <option value="div1">div1</option> <option value="div2">div2</option> <option value="div3">div3</option>

</select><br /> DIV值:<input type="text" id="context"/><br /> <input type="button" id="button" value="添加数据"/> <input type="button" id="but" value="查询全部"/> <input type="button" id="query" value="模糊查询"/>

<h1>div1数据如下</h1> <div > <table border="1" width="350" id="t"> <thead class="head" id="div1"> <tr> <td>DIV名称</td> <td>DIV值</td> </tr> </thead> </table> </div> <h1>div2数据如下</h1> <div > <table border="1" width="350" id="t"> <thead class="head" id="div2"> <tr> <td>DIV名称</td> <td>DIV值</td> </tr> </thead> </table> </div> <h1>div3数据如下</h1> <div > <table border="1" width="350" id="t"> <thead class="head" id="div3"> <tr> <td>DIV名称</td> <td>DIV值</td> </tr> </thead> </table> </div>

<h1>数据库的表数据</h1> <table border="1" width="350" id="tab"> <thead> <tr> <td>字段ID</td> <td>字段DIV_ID</td> <td>字段CONTEXT</td> <td>字段DTT</td> <td>是否删除</td> <td>是否编辑</td> </tr> </thead> <tbody></tbody> </table>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack项目轻松混用css module

    本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下...

    我是leon
  • PHP7.+系列新特性和新变更

    组合比较符号用于比较两个表达式。当$a小于、等于或大于$b时它分别返回-1、0或1,比较规则延续常规比较规则。对象不能进行比较

    ITer.996
  • 2019-08-16 vue的axios的拦截器,响应器(api的集中处理。统一处理入参和出参)

    用户4344670
  • IE条件注释,嗅探低版本IE用户,并引导升级

    语句的意思是:IE8浏览器下,引入my.css文件。其他版本IE浏览器,if判断为flase,则不引入。

    我是leon
  • PHP7.1新特性

    参数以及返回值的类型现在可以通过在类型前加上一个问号使之允许为空。当启用这个特性时,传入的参数或者函数返回的结果要么是给定的类型,要么是null

    ITer.996
  • tomcat学习|源码学习方法及tomcat处理Web请求

    上一波,我们一起新建了web应用,然后把war包丢到tomcat源码中的webapps 目录,然后通过源码启动的方式成功debug运行了我们web应用,并且在浏...

    微笑的小小刀
  • .Net微信网页开发之JSSDK使用步骤和配置信息timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)的生成获取讲解

      因为接下来会有几篇关于微信JS-SDK功能使用的文章,主要会对微信分享,获取设备信息,获取地理位置,微信扫一扫这几个功能进行讲解。而这几个功能都是围绕着微信...

    追逐时光
  • 「网络安全」Web防火墙和下一代防火墙的区别

    客户经常询问“当我已经拥有下一代防火墙(NGFW)时,为什么需要Web应用程序防火墙(WAF)?”。本博文的目的是解释两种解决方案之间的区别,重点关注Web应用...

    首席架构师智库
  • 源码解析-url状态检测神器ping-url

    ping-url是我最近开源的一个小工具,这篇文章也是专门写它设计理念的科普文。 为什么会做这个ping-url开源工具呢? 起因是:本小哥在某天接到一个特殊的...

    我是leon
  • 【粤嵌实训】Python小游戏开发之“代码大战”

    自从 PHP 大张旗鼓宣称其为世界上最好的编程语言后,世界各路编程语言群起讨伐,战火一直蔓延到21世纪中叶。战争有时候并不总是带来灾难的,甚至还会促进世界大融...

    悠风

扫码关注云+社区

领取腾讯云代金券