开发者社区> yaohong> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery实现表格动态添加

简介: //点击追加触发$(function(){$("#button").click(function(){var div_ = $("#sel").val();var context = $("#context").
+关注继续查看

//点击追加触发
$(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操作table,合并单元格,合并相同的行   合并的方法 $("#tableid").mergeCell({  cols:[X,X] ///参数为要合并的列}) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.p
1185 0
JQuery操作一个表格简单示例
jquery操作table的一个简单示例,仅做参考,具体可以根据原javascript操作table的操作更改为jquery操作方式。 .mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px} .
741 0
100多个经典常用的jQuery插件大全实例演示和下载
100多个经典常用的jQuery插件大全实例演示和下载  更多 > 07-31 cropped仿新浪微博头像上传裁剪缩小放大预览 07-29 prettyPhoto和fancybo...
3289 0
JQuery验证插件validation的使用
下载:        下载validatation插件地址:jqueryvalidation.org/;这里需要注意的是validation验证插件有依赖于JQuery的,所以连同JQuery也要一起放置到项目中。
6054 0
举例说明jquery插件的编写方法
jquery插件开发分为类级别开发和对象级别开发
6185 0
jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery基于jQuery开发,非常简单的水平方向折叠控件。主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.
1453 0
2011年7月10个非常棒的jQuery插件
) Scrollable 可以按自己的需求在一个简单,可配置的导航条中指定像1, 2, 3, 15…这样的展播分页框。   2) Vertical Slider jquery.mb.verticalSlider能够让将一个很长的列表进行分页管理,它能够管理已经存在你页面DOM中的任何元素集合,也可以通过Ajax按需加载。
841 0
jquery插件整理篇(二)消息提示类jquery插件
(1)Facebox Facebox 是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。Facebox (2)SimpleModal SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。
1202 0
jquery插件整理篇(四)自动补全类插件
(1)AutoComplete-JQueryjQuery插件易于集成到现在的表单中(Form)。 (2)Facebook like Autocomplete 基于jQuery开发,类似于FaceBoox提供的AutoCompleter。
864 0
+关注
yaohong
云计算
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载