jquery管理数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据管理</title>
<style type="text/css">
body
{
font-size: 12px;
}
table
{
width: 360px;
border-collapse: collapse;
}
table tr th, td
{
border: solid 1px #666;
text-align: center;
}
table tr td img
{
border: solid 1px #ccc;
padding: 3px;
width: 42px;
height: 60px;
cursor: hand;
}
table tr td span
{
float: left;
padding-left: 12px;
}
table tr th
{
background-color: #ccc;
height: 32px;
}
.clsImg
{
position: absolute;
border: solid 1px #ccc;
padding: 3px;
width: 85px;
height: 120px;
background-color: #eee;
display: none;
}
.btn
{
border: solid 1px #666;
padding: 2px;
width: 50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色
/*全选复选框单击事件*/
$("#chkAll").click(function () {
if (this.checked) { //如果自己被选中
$("table tr input[type=checkbox]").attr("checked", true);
}
else {
$("table tr input[type=checkbox]").attr("checked", false);
}
});
/*删除按钮单击事件*/
$("#btnDel").click(function () {
var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选框外的所有选中项
alert(intL);
if (intL != 0) { //如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')").each(function (index) { //遍历除全选框外的行
if (this.checked) { //如果选中
$("table tr[id=" + this.value + "]").remove(); //获取选中的值，并删除该值所在的行。如果要删除某行数据，先获取该行数据选中后的id号，即this.value值，然后将该值通过Ajax技术传给后台页面，执行数据库中的删除操作，即真正 实现记录的删除功能。本实例仅实现页面中行的删除。
}
});
}
});
/*小图片鼠标移动事件*/
var x = 5; var y = 15; //初始化提示图片位置
$("table tr td img").mousemove(function (e) {
$("#imgTip").attr("src", this.src) //设置提示图片src属性
.css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }) //设置提示图片的位置
.show(3000); //用3000秒显示图片
})
/*小图片鼠标移出事件*/
$("table tr td img").mouseout(function () {
$("#imgTip").hide(); //隐藏图片
});
});
</script>
</head>
<body>
<table>
<tr>
<th>
选项
</th>
<th>
编号
</th>
<th>
封面
</th>
<th>
购书人
</th>
<th>
性别
</th>
<th>
购书价
</th>
</tr>
<tr id="0">
<td>
<input type="checkbox" id="Checkbox1" value="0" />
</td>
<td>
1001
</td>
<td>
<img src="Images/m6.gif" alt="" />
</td>
<td>
李晓明
</td>
<td>
男
</td>
<td>
25.60
</td>
</tr>
<tr id="1">
<td>
<input type="checkbox" id="Checkbox2" value="1" />
</td>
<td>
1002
</td>
<td>
<img src="Images/m6_1.gif" alt="" />
</td>
<td>
刘明明
</td>
<td>
女
</td>
<td>
55.60
</td>
</tr>
<tr id="2">
<td>
<input type="checkbox" id="Checkbox3" value="2" />
</td>
<td>
1003
</td>
<td>
<img src="Images/xiaohou.png" alt=""/>
</td>
<td>
张晓星
</td>
<td>
男
</td>
<td>
45.60
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: left; height: 28px;">
<span>
<input id="chkAll" type="checkbox" />全选 </span><span>
<input type="button" value="删除" id="btnDel" class="btn" />
</span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/m6.gif" />
</body>
</html>
jquery管理数据相关推荐
- （转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
- OCA读书笔记(9) - 管理数据同步
9.Managing Data Concurrency 描述锁机制以及oracle如何管理数据一致性 监控和解决锁冲突 管理数据的并发--管理锁 数据的不一致: 脏读 更改丢失 幻影读 脏读: 数据是 ...
- 机器学习如何帮助企业高效地管理数据？
机器学习是当今技术领域的热门话题.从自驾车,到反恐斗争中捕捉邪恶的内容,应用程序在您拍摄照片之前自动美图等,这些应用程序无处不在.每一项创新都创造了一个新的商业机会,同时简化和自动化通常远远超出了我们 ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 创建页脚摘要
jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...
- C++ 管理数据内存的方法
C++有3种管理数据内存的方式:自动存储.静态存储和动态存储(有时也叫做自由存储空间或堆heap) 1. 自动存储 自动变量是一个局部变量,作用域为包含它的代码块. 自动变量通常存储在栈中,执行代码块 ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- Django 3.2.5博客开发教程:用Admin管理后台管理数据
上节我们我们把数据库迁移到数据库里去了,那么现在我们数据库里是个什么样的情况呢?我们点击Pycharm右上角的Database,然后在网站项目里选中我们的数据库文件db.sqlite3,把它拖到Dat ...
- Qt Creator管理数据收集设置
Qt Creator管理数据收集设置 管理数据收集设置 数据收集原理 收集使用情况统计 指定遥测设置 管理数据收集设置 在将Qt Creator作为Qt安装的一部分进行安装时,系统会询问您是否允许其收 ...
最新文章
- windows下mysql和linux下mysql主从配置
- 中国联通备战5G MWC发布《Edge-Cloud平台架构及产业生态白皮书》
- 【转】mssql中大小写的区分
- js 获取sessionid_百战卓越班学员学习经验分享：页面js代码
- 数据结构与算法笔记（十一）—— 归并排序
- ROS知识：关于如何命名的约定
- python做excel表格代码_python操作excel表格
- as的使用技巧及注意点
- HTTP知识普及系列：HTTP返回状态码
- ACM-ICPC 2018徐州网络赛-H题 Ryuji doesn't want to study
- Mac安装sqlmap【亲测有用】
- javascript 未来新方法的介绍
- java中if结构用图表示_Java if语句结构和指令流水线
- thinkphp上传
- php面试题做得差,php面试题，你能解决几个？
- 求众数leetcode(169)+投票算法
- 史上最全的芯片封装介绍
- 人间繁华江上明月，乃浮生一梦，惟真情长在——读沈君山《浮生再记》（并转书评）...
- matlab 中画箭头
- 张凯龙 西北工业大学计算机学院,张凯龙的个人主页-西北工业大学教师个人主页...