jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效
好久没有写东西了，当然不是没东西可写，只是没有时间写。今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来，供自己或者别人查询使用。最近我在做一个新的 B/S 系统，由于没有专门的美工人员和前端人员，所以这个工作我就担当起来。后端的代码是我的本职工作，没有话说。前端的东西就比较麻烦了。我最开始工作之初也做过美工，由于本人有绘画的功底，但是后来就把主要的经历放在了服务端代码了，因为大部分公司都会有前端人员来完成相应的工作。
当前的公司在技术方面没有什么积累，所以，所有的代码都要通过自己的编写来实现，前端也不例外。光前端的工作，本来打算2天搞完，后来发现超时2天。现在我要做一套UI的界面，通过后端数据生成前端的 Html Table 的样式，这部分工作已经完成。这个界面需要实现以下要求：隔行变色，可以进行全选、反选，选择的行变换背景色，并且鼠标经过行也要进行变色，同时，如果有选择的行，必须获取 CheckBox 的值，以后可以进行一些列操作。好久没有写前端代码了，也生了不少，这个过程很麻烦，现在终于过来了。为了防止以后还有这部分的需要，所以今天就把代码记录下来，便于以后查询使用。（这些对于高手来说，很简单，我不是高手针对前端，希望高手不要拍砖！）
一、先上一张图片，大家来看看效果！
二、有了以上图片，下面就直接贴代码了，先上 CSS 代码。
table{width:100%;border-collapse:collapse;margin:1em 0;}
table, td{font:100% Arial, Helvetica, sans-serif;font-size:13px;}
th,td{padding:.5em;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;font-size:14px;font-weight:bold;}
td{background:#e5f1f4;font-size:13px; cursor:pointer}
tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}
tr.highlight td{background:#ecfbd4;}
tr.selected td{background:#bce774;color:#555;}
td input[type=checkbox] { display:inherit;text-align:center;outline:none }
td a.button{text-align:center;margin:0 5px; }
三、Html table 的代码
<table id="myDataTable" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="75"><center><label><input type="checkbox" id="cbMulController" name="cbMulController"></label></center></th>
<th width="10%">主键</th>
<th width="10%">账号名</th>
<th width="10%">开始日期</th>
<th width="10%">结束日期</th>
<th width="10%">登陆日期</th>
<th width="10%">登陆次数</th>
<th width="10%">启用</th>
<th width="340"><center>管理</center></th>
</tr>
</thead>
<tbody id="tdbody">
<tr>
<td><center><input id="cbMultiple_23" name="cbMultiple" type="checkbox" value="23"/></center></td>
<td>23</td>
<td>liulei123456</td>
<td>2019-03-01 18:19:57</td>
<td>2019-06-01 18:19:57</td>
<td>2019-03-01 18:19:57</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/23" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/23'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/23" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr>
<td><center><input id="cbMultiple_22" name="cbMultiple" type="checkbox" value="22"/></center></td>
<td>22</td>
<td>liulei12345678</td>
<td>2019-02-27 17:43:55</td>
<td>2019-05-27 17:43:55</td>
<td>2019-02-27 17:43:55</td>
<td>0</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/22" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/22'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/22" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr>
<td><center><input id="cbMultiple_9" name="cbMultiple" type="checkbox" value="9"/></center></td>
<td>9</td>
<td>YangYanShun</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:19:57</td>
<td>2019-01-18 14:19:57</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/9" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/9'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/9" class="button button-raised button-royal button-small">修改</a></center>
</td>
</tr>
<tr>
<td><center><input id="cbMultiple_8" name="cbMultiple" type="checkbox" value="8"/></center></td>
<td>8</td>
<td>YangYanSi</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:19:43</td>
<td>2019-01-18 14:19:43</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/8" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/8'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/8" class="button button-raised button-royal button-small">修改</a></center>
</td>
</tr>
<tr>
<td><center><input id="cbMultiple_7" name="cbMultiple" type="checkbox" value="7"/></center></td>
<td>7</td>
<td>YangYanZhao</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:19:26</td>
<td>2019-01-18 14:19:26</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/7" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/7'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/7" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr>
<td><center><input id="cbMultiple_6" name="cbMultiple" type="checkbox" value="6"/></center></td>
<td>6</td>
<td>YangYanDe</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:18:59</td>
<td>2019-01-18 14:18:59</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/6" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/6'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/6" class="button button-raised button-royal button-small">修改</a></center>
</td>
</tr>
<tr><td><center><input id="cbMultiple_5" name="cbMultiple" type="checkbox" value="5"/></center></td>
<td>5</td>
<td>YangYanHui</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:18:08</td>
<td>2019-01-18 14:18:08</td>
<td>1</td>
<td>True</td>
<td>
<center>
<a href="/Backstage/AccountManage/View/5" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/5'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/5" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr>
<td><center><input id="cbMultiple_4" name="cbMultiple" type="checkbox" value="4"/></center></td>
<td>4</td>
<td>YangYanGuang</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:10:33</td>
<td>2019-01-18 14:10:33</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/4" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/4'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/4" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr><td><center><input id="cbMultiple_3" name="cbMultiple" type="checkbox" value="3"/></center></td>
<td>3</td>
<td>YangYanDing</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:10:12</td>
<td>2019-01-18 14:10:12</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/3" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/3'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/3" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr><td><center><input id="cbMultiple_2" name="cbMultiple" type="checkbox" value="2"/></center></td>
<td>2</td>
<td>YangYanPing</td>
<td>2019-01-18 14:08:13</td>
<td>2019-02-18 14:09:30</td>
<td>2019-01-18 14:09:30</td>
<td>1</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/2" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/2'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/2" class="button button-raised button-royal button-small">修改</a></center></td>
</tr>
<tr>
<td><center><input id="cbMultiple_1" name="cbMultiple" type="checkbox" value="1"/></center></td>
<td>1</td>
<td>Administrator123</td>
<td>2019-01-18 14:08:13</td>
<td>2019-05-05 14:42:35</td>
<td>2019-03-06 14:42:35</td>
<td>202</td>
<td>True</td>
<td><center>
<a href="/Backstage/AccountManage/View/1" class="button button-raised button-primary button-small">查看</a>
<a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/1'" class="button button-raised button-caution button-small">删除</a>
<a href="/Backstage/AccountManage/Modify/1" class="button button-raised button-royal button-small">修改</a></center>
</td>
</tr></tbody></table>
四、以下就是最主要的代码了，JavaScript 代码，该代码依赖 JQuery，使用之前请先引入。
$(document).ready(function () {
// 例子1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function () { $(this).addClass('highlight'); },
function () { $(this).removeClass('highlight'); }
);
$('.cssraindemo1 tbody tr').click(
function () { $(this).toggleClass('selected'); }
);
//例子2：可以选择 checkbox 或者点击行控制行的颜色和 checkbox 是否是选中状态:
$('#myDataTable tbody tr:even').addClass('odd');
$('#myDataTable tbody tr').hover(
function () { $(this).addClass('highlight'); },
function () { $(this).removeClass('highlight'); }
);
// 如果复选框默认情况下是选择的，变色.
$('#myDataTable input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('#myDataTable tbody tr').find("td:first").click(
function () {
if ($(this).parents('tr').hasClass('selected')) {
$(this).parents('tr').removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
//自己增加的代码，获取选择 CheckBox 的值
var replaceValue = $(this).find('input[type="checkbox"]').val();
$("input[type=text]", document.forms[0]).each(function () {
if (this.name == "txtDataKeys") {
if (document.getElementById(this.name).value.length != 0) {
if (document.getElementById(this.name).value.indexOf("," + replaceValue) != -1) {
document.getElementById(this.name).value = document.getElementById(this.name).value.replace("," + replaceValue, "");
}
else if (document.getElementById(this.name).value.indexOf(replaceValue + ",") != -1) {
document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue + ",", "");
}
else {
document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue, "");
}
}
}
});
} else {
$(this).parents('tr').addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked', 'checked');
//自己增加的代码，获取选择 CheckBox 的值
var replaceValue = $(this).find('input[type="checkbox"]').val();
$("input[type=text]", document.forms[0]).each(function () {
if (this.name == "txtDataKeys") {
if (document.getElementById(this.name).value == "") {
document.getElementById(this.name).value = replaceValue;
}
else {
document.getElementById(this.name).value += "," + replaceValue;
}
}
});
}
}
);
//例子3：选择 checkbox 控制行的颜色
$('#myDataTable tbody tr:even').addClass('odd');
$('#myDataTable tbody tr').hover(
function () { $(this).addClass('highlight'); },
function () { $(this).removeClass('highlight'); }
);
//如果复选框默认情况下是选择的，变色.
$('#myDataTable tbody input[type="checkbox"]:checked').parents('tr').addClass('selected');
//复选框
$('#myDataTable tbody input[type="checkbox"]').change(function () {
if ($(this).is(':checked') == false) {
$(this).parents('tr').removeClass('selected');
//自己增加的代码，获取选择 CheckBox 的值
var replaceValue = $(this).val();
$("input[type=text]", document.forms[1]).each(function () {
if (this.name == "txtDataKeys") {
if (document.getElementById(this.name).value.length != 0) {
if (document.getElementById(this.name).value.indexOf("," + replaceValue) != -1) {
document.getElementById(this.name).value = document.getElementById(this.name).value.replace("," + replaceValue, "");
}
else if (document.getElementById(this.name).value.indexOf(replaceValue + ",") != -1) {
document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue + ",", "");
}
else {
document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue, "");
}
}
}
});
} else {
$(this).parents('tr').addClass('selected');
//自己增加的代码，获取选择 CheckBox 的值
var replaceValue = $(this).val();
$("input[type=text]", document.forms[1]).each(function () {
if (this.name == "txtDataKeys") {
if (document.getElementById(this.name).value == "") {
document.getElementById(this.name).value = replaceValue;
}
else {
document.getElementById(this.name).value += "," + replaceValue;
}
}
});
}
});
//例子4：
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function () { $(this).addClass('highlight'); },
function () { $(this).removeClass('highlight'); }
);
// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
function () {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked', 'checked');
}
);
});
//全选或者反选
//一键控制全选、反选、全不选
$(document).ready(function () {
$('#myDataTable thead #cbMulController').change(function () {
if ($(this).is(':checked')) {
//如果全选是选择状态，其他所有的checkbox 没有选择的编程选择状态，有选择的状态变成没有选中的状态
var box = $('#myDataTable tbody input[name="cbMultiple"]');
$('#myDataTable tbody input[name="cbMultiple"]').each(function () {
$(this).prop('checked', $(this).is(':checked') ? false : true);
//改变所在行的背景颜色，表明是选择的行
if ($(this).is(':checked')) {
$(this).parents('tr').addClass('selected');
}
else {
if ($(this).parents('tr').hasClass('selected')) {
$(this).parents('tr').removeClass('selected');
}
}
});
}
else {
//如果全选的是取消状态，剩余的checkbox也取消选中
$('#myDataTable tbody input[name="cbMultiple"]').each(function () {
$(this).prop('checked', $(this).is(':checked') ? false : true);
//改变所在行的背景颜色，表明是选择的行
if ($(this).is(':checked')) {
$(this).parents('tr').addClass('selected');
}
else {
if ($(this).parents('tr').hasClass('selected')) {
$(this).parents('tr').removeClass('selected');
}
}
});
}
//获取所有选择的 checkbox 的值
var keysArray = new Array();
$('#myDataTable tbody input[type="checkbox"]:checked').each(function () {
keysArray.push($(this).val());//向数组中添加元素
});
var keysValue = keysArray.join(',');//将数组元素连接起来以构建一个字符串
//获取值并赋值给 hidden 域
document.getElementById("txtDataKeys").value = keysValue;
});
});
五、总结了
好了，终于写完了，以后不怕了，这个东西，要想立刻能找到合适的代码不是那么容易，吃一堑长一智，我把这些经常用到的，就留下来，下次再找就容易了。不忘初心，继续努力。
jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效的更多相关文章
- 全选,反选,获取值ajax提交
//必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...
- JavaScript实现表单的全选,反选,获取值
构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- CheckBox复选框全选以及获取值
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery 1.8全选反选删除选中项实现
JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- ----Juquery复选框全选反选及获取选中值Value
--获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...
- JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- ntp服务
ntp服务主要是用于对计算机的时间同步管理操作.时间是对服务器来说是很重要的,一般很多网站都需要读取服务器时间来记录相关信息,如果时间不准,则可能造成很大的影响,对于集群,也需要时间同步. 部署安装N ...
- 记录一次 “ORA-12516：TNS：监听程序找不到符合协议堆栈要求的可用处理程序” 的处理过程
一.今天同事反馈业务化运行的数据中心库发生了oracle无法连接的情况,导致所有业务系统无法正常运作的问题.报:“ORA-12516:TNS:监听程序找不到符合协议堆栈要求的可用处理程序” 二.收到这 ...
- Day71Django基础
Django框架基础一 python中的web框架 a:socket b:路由跟视图函数匹配关系 c:模板渲染 django: a: 用了别人的wsgiref b:自己写 ...
- Python简单语音识别并响应
起因是一个工作中喜欢说口头禅的同事,昨天老说"你看看你看看 操不操心".说了几次之后我就在他说完"你看看"后面续上,"操不操心".往复多次后 ...
- JavaScript代理模式
代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂" ...
- LocalVariableTable之 Slot 复用
LocalVariableTable中的 Slot, 是存在复用现象的,这个我早就知道,但是,不太清楚是如何复用的. Java语言规范与JVM规范都没有对Java语言具体要如何使用JVM的局部变量sl ...
- loadrunner代理录制脚本
1.打开loadrunner录制脚本选项: 2.start recording弹窗选择options: 3.设置loadrunner端口,可自定义:后面的浏览器设置代理需要用到此处设置的端口号: 4 ...
- 使用Java创建指定大小的空文件夹
/** 方法一 * 创建固定大小的文件 * @param file * @param length * @throws IOException */ public static void create ...
- js 序列化
Python 序列化 字符串 = json.dumps(对象) 对象转字符串 对象 = json.loads(字符串) 字符串转对象 Javascript 字符串 = JSON.stringif ...
- JAVA版本微信管家平台—JeeWx 捷微 4.1 微服务版本发布，微信砍价活动闪亮登场！
捷微 4.1 微服务版本发布,微信砍价活动闪亮登场 ^_^ JEEWX 从4.0版本开始,技术架构全新换代更名 “捷微H5”.这是一款开源免费的微信运营平台,是jeewx的新一代产品,平台涵盖了: ...