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>
jquery实现表格动态添加的更多相关文章
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- JQuery实现表格动态增加行并对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题？
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...
- jQuery如何获取动态添加的元素
1. 使用 on()方法 本质上使用了事件委派,将事件委派在父元素身上 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...
- jquery监听动态添加的input的change事件
使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...
- 为表格动态添加一行，miniui组件无效
想要使用miniui实现这样的功能,点击按钮,在一个<td>中动态添加一个miniui输入框和一个按钮,结果miniui的样式无法渲染,请问这种问题可以怎么解决代码如下: <tr&g ...
- [转] JQuery UI Tabs 动态添加页签，并跳转到新页签
[From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...
- 基于jquery的表格动态创建，自动绑定，自动获取值
最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...
- Jquery 页面元素动态添加后绑定事件丢失方法,非 live
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...
随机推荐
- Android开发学习之路-二维码学习
这个月装逼有点少了,为什么呢,因为去考软件射鸡师了,快到儿童节了,赶紧写篇博纪念一下逝去的青春,唔,请忽略这句话. 二维码其实有很多种,但是我们常见的微信使用的是一种叫做QRCode的二维码,像下面这 ...
- 【NodeJS 学习笔记04】新闻发布系统
前言 昨天,我们跟着这位大哥的博客(https://github.com/nswbmw/N-blog/wiki/_pages)进行了nodeJS初步的学习,最后也能将数据插入数据库了 但是一味的跟着别 ...
- MongoDB 文档的更新操作
在MongoDB中,更新单个doc的操作是原子性的.默认情况下,如果一个update操作更新多个doc,那么对每个doc的更新是原子性的,但是对整个update 操作而言,不是原子性的,可能存在前面的 ...
- 【Win 10开发】协议-上篇：自定义应用协议
就像系统许多内置应用可以通过URI来启动(如ms-settings-bluetooth:可以打开蓝牙设置页),我们自己开发的应用程序,如果需要的话,可以为应用程序自定义一个协议.应用程序协议在安装时会 ...
- 一款开源免费跨浏览器的视频播放器--videojs使用介绍
最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...
- [linux]ssh（转载）
ssh登陆问题 SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则su ...
- （2）从实际项目谈起，基于MEF的插件框架之总体设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.MEF框架简介 MEF的全称是Managed Extensibil ...
- CSS魔法堂：重拾Border之——解构Border
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- IntelliJ IDEA 转移C盘.IntelliJIdea（索引目录）
转移原因: C盘是机械硬盘,并且容量不多的情况下,建议转移. 转移步骤: 找到索引目录 win10系统下默认路径:C:\Users\asus\.IntelliJIdea2016.2 *复制或剪切到新的 ...
- SQL Server中smalldatetime的日期范围为何是[1900-01-01,2079-06-06]
本文目录列表: 1.SQL Server中的基准日期 2.smalldatetime的日期范围 3.smalldatetime的日期范围和无符号2字节整数的关系 4.总结语 5.参考清单列表 SQ ...