//点击追加触发
$(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实现表格动态添加的更多相关文章

  1. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  2. JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  3. 如何解决jQuery Validation针对动态添加的表单无法工作的问题？

    为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...

  4. jQuery如何获取动态添加的元素

    1. 使用 on()方法        本质上使用了事件委派,将事件委派在父元素身上     自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...

  5. jquery监听动态添加的input的change事件

    使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...

  6. 为表格动态添加一行，miniui组件无效

    想要使用miniui实现这样的功能,点击按钮,在一个<td>中动态添加一个miniui输入框和一个按钮,结果miniui的样式无法渲染,请问这种问题可以怎么解决代码如下: <tr&g ...

  7. [转] JQuery UI Tabs 动态添加页签，并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  8. 基于jquery的表格动态创建，自动绑定，自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  9. Jquery 页面元素动态添加后绑定事件丢失方法,非 live

    代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type="button" value="A ...

随机推荐

  1. IIS ApplicationPoolIdentity

    原创地址:http://www.cnblogs.com/jfzhu/p/4067297.html 转载请注明出处 从IIS 7.5开始,Application Pool Identity的Built- ...

  2. Java动态编译

    程序产生过程 下图展示了从源代码到可运行程序的过程,正常情况下先编译(明文源码到字节码),后执行(JVM加载字节码,获得类模板,实例化,方法使用).本文来探索下当程序已经开始执行,但在.class甚至 ...

  3. Html5 绘制五星红旗

    Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示: 绘制思路在上图中已有说明,具体代码如下: <script type="text/javascrip ...

  4. Jmeter 使用Jmeter与Badboy进行压力测试

    1. 介绍 Badboy是一个录制请求的工具,这里用它来生成文件给JMeter用. JMeter是一个用java写的开源的性能测试工具,用于模拟在服务器.网络或者其他对象上附加高负载以测试他们提供服务 ...

  5. Objective-C 原型模式 -- 简单介绍和使用

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. Prototype原型模式是一种创建型设计模式,Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建 ...

  6. 【requireJS源码学习01】了解整个requireJS的结构

    前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...

  7. html 生成pdf

    HTML生成PDF(c#) 最近因为工作需要,小小的研究了一下HTML生成PDF的方法,这方面的内容很多,但要么是不尽如人意的方法,要么就是那种收费的类库!为了广大.neter的福利,把自己的一点小小 ...

  8. Selenium WebDriver 3.0 需要注意的事项

    以下所有代码基于Java 首先,要使用WebDriver 3.0 的话 请使用JAVA 8(必要)   其次,由于W3C标准化以及各大浏览器厂商的积极跟进,自WebDriver 3.0 之后,Sele ...

  9. EF-InvalidOperation系列

    1.InvalidOperation强制转换为值类型 'System.Guid' 失败,因为实例化的值为 null.结果类型的泛型参数或查询必须使用可以为 null 的类型 错误信息: The cas ...

  10. 【转】Linux C动态内存泄漏追踪方法

    原文:http://www.cnblogs.com/san-fu-su/p/5737984.html C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借 ...